16

ユーザーが入力できる巨大な入力フォームとフィールドがあります。

フォームユーザーがタブキーを使用して次のフィールドに移動すると、その間にいくつかの非表示フィールドと読み取り専用テキストボックスがあり、その間にjavascriptを使用してタブキーが無効になります。

現在、ユーザーはタブキーを使用するのが難しいと感じており、キーボードの下矢印キーで同じ機能を望んでいます。

私は以下のコードを使用してjsでタブキーコードを呼び出していましたが、機能していませんでした。

function handleKeyDownEvent(eventRef)
{ 
 var charCode = (window.event) ? eventRef.keyCode : eventRef.which;

 //alert(charCode);

 // Arrow keys (37:left, 38:up, 39:right, 40:down)...
 if (  (charCode == 40) )
 {

  if ( window.event )
   window.event.keyCode = 9;
  else
   event.which = 9;

  return false;
 }

 return true;
}

<input type="text"   onkeydown=" return  handleKeyDownEvent(event);" >
4

3 に答える 3

12

jQueryを使用すると、次のことができます。

$('input, select').keydown(function(e) {
    if (e.keyCode==40) {
        $(this).next('input, select').focus();
    }
});

下矢印キー (keyCode 40) を押すと、次の入力にフォーカスが移ります。

デモ</p>

編集 ：

Vanilla JS では、これは次のように実行できます。

function doThing(inputs) {    
    for (var i=0; i<inputs.length; i++) {
        inputs[i].onkeydown = function(e) {
            if (e.keyCode==40) {
                var node = this.nextSibling;
                while (node) {
                    console.log(node.tagName);
                    if (node.tagName=='INPUT' || node.tagName=='SELECT') {
                        node.focus();
                        break;
                    }
                    node = node.nextSibling;                
                }
            }
        };
    };
}
doThing(document.getElementsByTagName('input'));
doThing(document.getElementsByTagName('select'));

おそらく上キーもマッピングし、最後の入力で最初の入力に移動するなどしたいことに注意してください。正確な要件に応じて詳細を処理します。

于 2012-09-13T13:16:53.910 に答える
4

これは私の最終的な作業コードです:

$('input[type="text"],textarea').keydown( function(e) {
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;

    if(key == 40) {
        e.preventDefault();
        var inputs = $(this).parents('form').find(':input[type="text"]:enabled:visible:not("disabled"),textarea');

        inputs.eq( inputs.index(this)+ 1 ).focus();
        inputs.eq( inputs.index(this)+ 1 ).click();
    }
});
于 2012-09-18T10:42:31.593 に答える
0

私が正しく理解している場合、一部のフィールドは読み取り専用であるため、読み取り専用であってもタブキーでそれらをアクティブにできます。次の編集可能なフィールドに移動するには、タブキーを数回押す必要があるため、これは面倒です分野。それが正しい場合、代わりの解決策はtabindex、入力フィールドで属性を使用し、それぞれにインデックスを付けて、読み取り専用および編集不可のフィールドが選択されないようにすることです。tabindex 属性の詳細については、こちらを参照してください。

于 2012-09-13T13:17:13.307 に答える