2

JQueryを使用せず
にTabキーを押したときにHTML要素を回転させる方法は??
たとえば、
このフォームでは 

<form>
    Field 1: <input type="text" id="field1" tabindex=1 /><br />
    Field 2: <input type="text" id="field2" tabindex=2 /><br />
    Field 3: <input type="text" id="field3" tabindex=3 /><br />
    Field 4: <input type="text" id="field3" tabindex=4 /><br />     
</form>

ユーザーがTabキーを押し続ける
と、フォーカスされる項目は、
field1-> field2-> field3-> field4-> field1-> field2-> field3-> field4->field1->...など
になります。

4

4 に答える 4

1

field4の後にこれを試してください:

<script type="text/javascript">
var myInput = document.getElementById("field4");
if(myInput.addEventListener ) {
    myInput.addEventListener('keydown',this.keyHandler,false);
} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

function keyHandler(e) {
    var TABKEY = 9;
    if(e.keyCode == TABKEY) {
        if(e.preventDefault) {
            e.preventDefault();
        }
        document.getElementById('field1').focus();
        return false;
    }
}
</script>
于 2012-12-18T15:29:14.093 に答える
0

これを行う別の方法を見つけました。フォームの最後の div などに tabindex を指定し、フォーカスを取得したら、フォーカスをフォームの最初の要素に移動します。フィールドに明示的な tabindex を設定していないため、tabindex=0 を使用すると機能します。

var $last = $(".ok-cancel");
$last.attr("tabindex", "0");
$last.on("focus", function(){ ... move focus to first field ... }));

これには、最初の入力以外にフォームに何があるかを知る必要がないという利点があります (必要に応じて自動的に検出できます)。

PS：質問にはjQueryがないと書かれていることは知っていますが、それが私のコードの内容です。

于 2013-01-18T07:36:42.090 に答える
0

タブは、最新のすべてのブラウザーでフォーム要素を回転する必要があります。html5autofocus属性を使用して、リストの最初の項目にカーソルを強制的にオートフォーカスすることができます。これが例です

HTML

<form>
    Field 1: <input type="text" id="field1" tabindex=1  autofocus="autofocus" /><br />
    Field 2: <input type="text" id="field2" tabindex=2 /><br />
    Field 3: <input type="text" id="field3" tabindex=3 /><br />
    Field 4: <input type="text" id="field3" tabindex=4 /><br />     
</form>

@JaredMcAteer は、オートフォーカスを使用するとユーザー、特にアクセシビリティに懸念があるユーザーのエクスペリエンスが低下する可能性があるという点で完全に正しいです。それを考慮してください。

于 2012-12-18T15:09:35.787 に答える