如何將焦點設置到重複控制內的編輯框？

我想設置焦點+光標到一個編輯框（最後一個）在一個repreat控制。重複是在面板內（panelRep）。然後我在面板外面有一個按鈕。如何將焦點設置到重複控制內的編輯框？

這是幾乎可以工作的按鈕的客戶端代碼。焦點已設置（圍繞字段的藍色邊框），但光標未放在字段中。用戶仍然需要點擊該字段才能寫入輸入。

實施例沒有焦點：
without focus

實施例具有焦點：
with focus

客戶端代碼按鈕，設置焦點到最後編輯框，其中id包含字符串inputKode：

try { 
var el = dojo.query('div[id*="inputKode"]'); 
var node = el[el.length-1]; 
setTimeout(function() { node.focus(); }, 500); 
//node.focus(); 
} catch (e) { }

面板代碼：

<xp:panel id="panelRep"> 
      <xp:repeat id="repeat1" rows="12" var="row" indexVar="idx" 
       value="#{view1}" repeatControls="false"> 
       <xp:panel id="panelLinje"> 
        <xp:this.data> 
         <xp:dominoDocument formName="frmPBudKodeVerdi" 
          var="dsdoc" action="editDocument" computeWithForm="both" 
          documentId="#{javascript:row.getUniversalID();}">       
         </xp:dominoDocument> 
        </xp:this.data> 
        <xp:table style="width:800.0px"> 
         <xp:tr> 
          <xp:td style="width:100px"> 
           <xp:inputText id="inputKode" 
            value="#{dsdoc.KodeNr}" style="width:62px"> 
            <xp:this.attrs> 
             <xp:attr name="tabindex" 
              value="#{javascript:return idx + '1';}"> 
             </xp:attr> 
            </xp:this.attrs> 
            <xp:typeAhead mode="partial" 
             minChars="1" var="lukey" valueMarkup="true" id="typeAhead1"> 
             <xp:this.valueList><![CDATA[#{javascript://var type = compositeData.type; 
             return TypeAheadKode2(sessionScope.type,lukey); 
             }]]></xp:this.valueList>  
            </xp:typeAhead> 
            <xp:eventHandler event="onchange" 
             submit="true" refreshMode="partial" refreshId="panelLinje"> 
             <xp:this.action><![CDATA[#{javascript:onChangeKode();}]]></xp:this.action> 
            </xp:eventHandler> 
           </xp:inputText>        
          </xp:td> 
          <xp:td style="width:450px"> 
           <xp:inputText id="inputNavn" 
            value="#{dsdoc.KodeNavn}" style="width:440px" 
            readonly="true"> 
           </xp:inputText> 
          </xp:td> 
          <xp:td style="width:60px"> 
           <xp:inputText id="inputNorm" 
            style="width:45px" value="#{dsdoc.NormPrProd}" 
            rendered="#{javascript:viewScope.visNorm}" readonly="true"> 
            <xp:this.attrs> 
             <xp:attr name="tabindex" 
              value="#{javascript:return idx + '2';}"> 
             </xp:attr> 
            </xp:this.attrs> 
            <xp:this.converter> 
             <xp:convertNumber 
              type="number"> 
             </xp:convertNumber> 
            </xp:this.converter> 
           </xp:inputText> 
          </xp:td> 
          <xp:td style="width:50px"> 
           <xp:inputText id="inputAntall" 
            style="width:45px" value="#{dsdoc.NormAntall}" 
            rendered="#{javascript:viewScope.visNorm}"> 
            <xp:this.converter> 
             <xp:convertNumber 
              type="number"> 
             </xp:convertNumber> 
            </xp:this.converter> 
            <xp:eventHandler 
             event="onchange" 
             submit="true" 
             refreshMode="partial" 
             refreshId="inputTimer"> 
             <xp:this.action><![CDATA[#{javascript:onChangeAntall()}]]></xp:this.action> 
            </xp:eventHandler> 
            <xp:this.attrs> 
             <xp:attr name="tabindex" 
              value="#{javascript:return idx + '3';}"> 
             </xp:attr> 
            </xp:this.attrs> 
           </xp:inputText> 
          </xp:td> 
          <xp:td 
           style="width:50px;text-align:right"> 
           <xp:inputText id="inputTimer" 
            value="#{dsdoc.Timer}" style="width:45px;text-align:right"> 
            <xp:this.converter> 
             <xp:convertNumber 
              type="number"> 
             </xp:convertNumber> 
            </xp:this.converter> 
            <xp:this.attrs> 
             <xp:attr name="tabindex" 
              value="#{javascript:return idx + '4';}"> 
             </xp:attr> 
            </xp:this.attrs> 
           </xp:inputText> 
          </xp:td> 
          <xp:td>        
          </xp:td> 
         </xp:tr> 
        </xp:table> 
        <xp:eventHandler event="onClientLoad" submit="true" 
         refreshMode="norefresh"> 
        </xp:eventHandler> 
       </xp:panel> 
      </xp:repeat> 
</xp:panel>

來源

2012-09-17 user1674918

只是想：onClientLoad腳本將焦點設置在編輯框級別，渲染屬性在中繼器== 1的索引變量上計算。 –

我已經在onClientLoad事件中嘗試了相同的客戶端js。焦點已設置（場周圍有藍色邊框），但光標不放在場內。 – user1674918

更新2012年9月22日：

@MarkyRoden - 感謝您指出我在正確的方向。

在完善了dojo.query選擇器之後，我結束了1行代碼。

var el = dojo.query('div[id*="inputKode"] .dijitInputField > input').at(-1)[0].focus();

原帖：

我發現，該元件將焦點設置爲不 INPUT元素。元素ID開始widget_

例如widget_view：_id1：_id2：_id3：repeat1：8：inputKode如果有8分排在重複

然後我發現元素的節點類型是DIV 通過查看element.innerHTML，我發現它有多個孩子。

我試過使用element.querySelector或element.querySelectorAll，但是我不能讓它們爲元素工作，所以我最終通過element.childNodes循環。不是很漂亮，但它現在做的工作..

我敢肯定，通過添加元素到dojo.query選擇器，或通過使用jQuery可以做得更好。要看看，後來..

嗯，這裏是我放在onClientLoad事件對我的CC代碼：

var el = dojo.query('div[id*="inputKode"]'); 
var node = el[el.length-1]; 
node.focus(); 

var activeElementId = document.activeElement.id; 
var activeElement = dojo.byId(activeElementId); 
var kids = activeElement.childNodes; 

for(var i=0; i < kids.length; i++) 
{ 
    if(kids[i].className == 'dijitReset dijitInputField dijitInputContainer') 
    { 
    var elementDiv = kids[i]; 
    var elementDivKids = elementDiv.childNodes; 

    for(var j=0; j < elementDivKids.length; j++) 
    { 
     var elementInput = elementDivKids[j]; 
     elementInput.focus(); 
    } 
    } 
}

問候，皮特

來源

2012-09-17 21:38:04 user1674918

Petter - 爲你工作嗎？我最終用這一行替換了上面的代碼塊： var el = dojo.query（'div [id * =「inputKode」] .dijitInputField'） – MarkyRoden

var el = =「inputKode」] .dijitInputField> input'）。at（-1）[0] .focus（）; – user1674918

如何將焦點設置到重複控制內的編輯框？

回答

相關問題