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

Question

我想在 repreat 控件中将焦点 + 放置光标设置为编辑框（最后一个）。重复在面板（panelRep）内。然后我在面板外有一个按钮。

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

无焦点示例：

焦点示例：

将焦点设置到最后一个编辑框的按钮的客户端代码，其中 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_

开头

例如 widget_view:_id1:_id2:_id3:repeat1:8:inputKode 如果重复中有 8 行

然后我发现元素的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();
    }
    } 
}

问候， 彼得