如何将焦点设置到重复控制内的编辑框？

我想设置焦点+光标到一个编辑框（最后一个）在一个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

如何将焦点设置到重复控制内的编辑框？

回答

相关问题