如何在重复控件中将焦点设置到“编辑框”？

Question

我想将焦点+光标放置在repreat控件内的“编辑框”（最后一个）上。 重复项位于面板（panelRep）中。 然后，我在面板外有一个按钮。

这是按钮的客户端代码，几乎可以使用。.焦点已设置（字段周围为蓝色边框），但光标未置于字段中。 用户仍然必须单击该字段才能写输入。

没有重点的示例：

重点示例：

按钮的客户端代码，该按钮将焦点设置到最后一个Edit Box，其中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) { } 

panelRep的代码：

<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>

Answer 1

更新22.09.2012：

@MarkyRoden-感谢您指出正确的方向。

完善dojo.query选择器后，我得到了1行代码。

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

原始帖子：

我发现被设置为焦点的元素不是 INPUT元素。 元素ID以widget_开头

例如，如果重复中有8行，则widget_view：_id1：_id2：_id3：repeat1：8：inputKode

然后，我发现该元素的nodeType为DIV。通过查看element.innerHTML，我发现它具有多个子代。

我尝试使用element.querySelector或element.querySelectorAll，但是我无法让它们为该元素工作，所以我最终遍历了element.childNodes。 不是很漂亮，但是现在可以工作了。

我确信可以通过将元素添加到dojo.query选择器中或使用jquery来做得更好。 必须稍后再调查。

好吧，这是我为CC放入onClientLoad事件中的代码：

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();
    }
    } 
}

问候，佩特