3

通常、ユーザーがWebページにアクセスし、キーボードのTabボタンを押すと、ページの先頭から選択項目が1つの要素から別の要素に移動します。

Webページがロードされたときに最初のテキスト領域に最初に焦点を合わせてキーボードのTabボタンを押すことにより、2つの特定のテキスト領域を切り替える解決策を探していますか？このTABキーを押すイベントでは、ページ上の他のすべての要素を無視する必要があります。

どうすればこれを達成できますか？

あなたの助けに感謝します！

=更新=

Firefox12.0で動作させることができました。IEとChromeが正しく動作しません。テキストエリアIDが#ICCIDと#MSISDNであるとすると、Jqueryは次のようになります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $(document).ready(function() {
            $("#ICCID").focus();
            });

            var $inp = $('.cls');

            $inp.bind('keydown', function(e) {
                var key = e.which;
                if (key == 9) {

                    e.preventDefault();
                    var nxtIdx = $inp.index(this) + 1;                  
                    $(".cls:eq(" + nxtIdx + ")").focus();

                //Simulate Enter after TAB
                var textInput = $("#MSISDN").val();
                var lines = textInput .split(/\r|\r\n|\n/);
                if (lines > 1) {

                    $("#MSISDN").on("keypress", function(e) {
                    if (e.keyCode == 9) {
                    var input = $(this);
                    var inputVal = input.val();
                    setTimeout(function() {
                    input.val(inputVal.substring(0,inputVal.length) + "\n");
                          }, 1);
                       }
                    });
                }



                }
                if (key == 9) {

                    e.preventDefault();
                    var nxtIdx = $inp.index(this) - 1;
                    $(".cls:eq(" + nxtIdx + ")").focus();

                //Simulate Enter after TAB
                $("#ICCID").on("keypress", function(e) {
                if (e.keyCode == 9) {
                var input = $(this);
                var inputVal = input.val();
                setTimeout(function() {
                input.val(inputVal.substring(0,inputVal.length) + "\n");
                      }, 1);
                   }
                });


                }
            });
        });
</script>
4

4 に答える 4

2

jQueryを使用してキーダウンアクションをキャッチし、フォーカスがあるテキストエリアを特定してから、focus（）メソッドを使用してフォーカスを他のテキストエリアに設定します。

textareasにid="textarea1"とid="textarea2"があるとします。まず、次の手順を実行して、ページが読み込まれたときに最初のテキストエリアにフォーカスを設定できます。 $('#textarea1').focus();

$("body").keypress(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    switch(code)
    {
        case 9:
            if($("#textarea1").focus()){
                //First one has focus, change to second one
                $("#textarea2").focus();
            }
            else if($("#textarea2").focus()) {
                //Second one has focus, change to first one
                $("#textarea1").focus();
            }

    }
});
于 2012-05-09T12:17:45.307 に答える
2

さて、私は自分のタスクの解決策を見つけました！また、TABキーイベントの直後のENTERキーのシミュレーションも含まれているため、ユーザーはEnterキーを押して新しい行に移動する必要はありません。IE9、FF12、Chrome18.0.xでテスト済み

ここにあります：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<!-- Switching between ICCIDs and MSISDNs textareas + simulating ENTER key pressing after the TAB key event - START -->
    <script type="text/javascript">
            $(function() {
                $(document).ready(function() {
                $("#ICCID").focus();
                });

                var $inp = $('.cls');

                $inp.bind('keydown', function(e) {
                    var key = e.which;
                    if (key == 9) {

                        e.preventDefault();
                        var nxtIdx = $inp.index(this) + 1;                  
                        $(".cls:eq(" + nxtIdx + ")").focus();

                    //Simulate Enter after TAB
                    var textInput = $("#MSISDN").val();
                    var lines = textInput .split(/\r|\r\n|\n/);
                    if (lines > 1) {

                        $("#MSISDN").on("keyup", function(e) {
                        if (e.keyCode == 9 || e.which  == 9) {
                        var input = $(this);
                        var inputVal = input.val();
                        setTimeout(function() {
                        input.val(inputVal.substring(0,inputVal.length) + "\r\n");
                              }, 1);
                           }
                        });
                    }



                    }
                    if (key == 9) {

                        e.preventDefault();
                        var nxtIdx = $inp.index(this) - 1;
                        $(".cls:eq(" + nxtIdx + ")").focus();

                    //Simulate Enter after TAB
                    $("#ICCID").on("keyup", function(e) {
                    if (e.keyCode == 9 || e.which  == 9) {
                    var input = $(this);
                    var inputVal = input.val();
                    setTimeout(function() {
                    input.val(inputVal.substring(0,inputVal.length) + "\r\n");
                          }, 1);
                       }
                    });


                    }
                });
            });
    </script>
    <!-- Switching between ICCIDs and MSISDNs textareas + simulating ENTER key pressing after the TAB key event -  END -->
于 2012-05-18T11:51:53.337 に答える
1

これはどうですか....私は仕事で退屈していると思います..

http://jsbin.com/uqalej/3/

HTML：

<input/>
<textarea id="t1"></textarea>
<textarea id="t2"></textarea>
<input/>

<button onClick='window.toggleBetween=true;'>Init</button>
<button onClick='window.toggleBetween=false;'>Destroy</button>

JS：

var d = document,
    t1 = d.getElementById("t1"),
    t2 = d.getElementById("t2"),

    nodeType, nodeTypes = [],
    i, iLen,
    y, yLen;

nodeTypes.push( d.getElementsByTagName("textarea") );
nodeTypes.push( d.getElementsByTagName("input") );
nodeTypes.push( d.getElementsByTagName("select") );

i = 0;
iLen = nodeTypes.length;
for ( ; i < iLen; i++ ) {
  nodeType = nodeTypes[i];
  y = 0;
  yLen = nodeType.length;
  for ( ; y < yLen; y++ ) {
    if ( nodeType[y] != t1 && nodeType[y] != t2 ) {
      nodeType[y].onfocus = function() {
        if ( window.toggleBetween )
          t1.focus();
      };
    }
  }
}
于 2012-05-09T12:29:30.750 に答える
0

ページの読み込み時にJavaScriptを使用する：

document.getElementById("textarea1").focus();
document.getElementById('textarea1').tabIndex="1";
document.getElementById('textarea2').tabIndex="2";
于 2012-05-09T12:18:18.230 に答える