2

フォーカスを設定し、カーソルを繰り返しコントロール内の編集ボックス (最後のボックス) に配置したいと思います。繰り返しはパネル (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>
4

1 に答える 1

0

更新 22.09.2012:

@MarkyRoden - 正しい方向に向けてくれてありがとう。

dojo.query セレクターを改良した後、コードは 1 行になりました。

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



元の投稿:

フォーカスが設定されている要素がINPUT 要素ではないことがわかりました。widget_で始まる要素 ID

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

よろしく、 ペッター

于 2012-09-17T21:38:04.613 に答える