仅在按 Tab 按钮时在两个文本区域之间切换

Switch between two textareas only when pressing Tab button

本文关键字：文本 两个 区域 之间 Tab 按钮      更新时间：2023-09-26

通常，当用户访问网页并按键盘上的 TAB 按钮时，选择从一个元素移动到另一个元素从页面开头开始。

我正在寻找一种解决方案，通过在加载网页时按键盘上的 TAB 按钮在第一个文本区域之间切换？对于此 TAB 键按下事件，必须忽略页面上的所有其他元素。

我怎样才能实现这一点？

感谢您的帮助！

=

更新 =

我已经设法让它在 火狐12.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>
使用

jQuery 捕获键下操作，确定哪个文本区域具有焦点，然后使用 focus（） 方法将焦点设置为另一个文本区域。

假设您的文本区域有 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();
            }
    }
});

好的，我已经找到了适合我的任务的解决方案！它还包括在 TAB 键事件之后对 ENTER 键的模拟，因此用户无需按 Enter 即可转到新行。与IE9，FF12，Chrome 18.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 -->

这个呢？我想我在工作中很无聊..

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

在页面加载时使用javascript：

document.getElementById("textarea1").focus();
document.getElementById('textarea1').tabIndex="1";
document.getElementById('textarea2').tabIndex="2";
相关文章：