僅在按下Tab按鈕時在兩個文本區之間切換

Question

通常，當用戶訪問網頁並按下鍵盤上的TAB按鈕時，選擇將從頁面開始時的一個元素移動到另一個元素。

我正在尋找一種解決方案，通過按下鍵盤上的Tab鍵在初始焦點上加載網頁時的第一個文本區域之間切換兩個特定的文本區域？對於此TAB鍵按下事件，頁面上的所有其他元素都必須被忽略。

我該如何實現這一目標？

謝謝你的幫助！

=更新=

我設法使其在Firefox 12.0下工作。 IE和Chrome無法正常工作。 Asuming文本區域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> 

Answer 1

好，我已經找到了解決方案，爲我的任務！它還包括在TAB鍵事件之後模擬ENTER鍵，因此用戶不需要按ENTER鍵即可進入新行。與IE9，FF12，鉻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 --> 

Answer 2

捕捉使用jQuery該keydown動作，確定哪些文本區域具有焦點，然後使用焦點（）方法來設置焦點到另一個textarea。

假設你的textareas有id =「textarea1」和id =「textarea2」。首先，你可以通過做焦點設置爲第一textarea的頁面加載時：$('#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(); 
      } 

    } 
}); 

Answer 3

使用在頁面加載的javascript：

document.getElementById("textarea1").focus(); 
document.getElementById('textarea1').tabIndex="1"; 
document.getElementById('textarea2').tabIndex="2"; 

Answer 4

這個怎麼樣....林在工作中我無聊想..

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