如何使用javascript強制“輸入鍵”充當“tab鍵”？

Question

我正在一個充滿要填寫的表格的網站上工作，我需要在按下轉義按鈕時將焦點移動到下一個輸入控件，就像按下“tab”一樣。 我找到了在按鍵為 13 時移動焦點的代碼，但這需要獲取要關注的元素的 ID

<input id="Text1" type="text" onkeydown="return noNumbers(event)" />
<input id="Text2" type="text" />

<script type="text/javascript">

    function noNumbers(e) {

        keynum = e.which;

        if (keynum == 13)
            document.getElementById("Text2").focus();

    }
</script>

我需要一個通用函數，當按鍵代碼為 13“即輸入”時，會觸發按下 9“即選項卡”的默認事件，當然在 Javascript 中

Answer 1

這將處理多個輸入字段。

這是 jQuery 版本： http : //jsfiddle.net/TnEB5/3/

 $('input').keypress(function(e) { if (e.which == 13) { $(this).next('input').focus(); e.preventDefault(); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="Text1" type="text" /> <input id="Text2" type="text" /> <input id="Text3" type="text" />

這是純 javascript 版本： http : //jsfiddle.net/TnEB5/5/ （您可能希望以不同的方式獲得兄弟姐妹）

 function tab(e) { if (e.which == 13) { e.target.nextSibling.nextSibling.focus(); e.preventDefault(); } } var inputs = document.getElementsByTagName('input'); for (var x = 0; x < inputs.length; x++) { var input = inputs[x]; input.onkeypress = tab; }

 <input id="Text1" type="text" /> <input id="Text2" type="text" /> <input id="Text3" type="text" />

Answer 2

改為處理按鍵並將 false 返回給瀏覽器：

http://jsfiddle.net/EeyTL/

<input id="Text1" type="text" />
<input id="Text2" type="text" />

<script type="text/javascript">
    document.getElementById('Text1').onkeypress = function (e) {
        if (e.which === 13) {
            document.getElementById("Text2").focus();
            return false;
        }
    };
</script>

Answer 3

您需要為通用解決方案顯式設置輸入字段的tabindex屬性。 就像是

<input id="Text1" type="text" tabindex="1" />
<input id="Text2" type="text" tabindex="2" />

<script type="text/javascript">
    $('input').keypress(function(e){
        if(e.which==13){ 
            $("[tabindex='"+($(this).attr("tabindex")+1)+"']").focus();
            e.preventDefault();
        }
    });    
</script>

此解決方案使用 jquery 為頁面上的所有輸入類型元素分配事件處理程序，將焦點設置為具有下一個最高 tabindex 屬性的元素，並在使用 e.preventDefault() 按下 Enter 時防止表單提交。 這是一個jfiddle

Answer 4

<input type="text" value="" onkeyup="doNext(this);"> a <br>
<input type="text" value="" onkeyup="doNext(this);"> b <br>
<input type="text" value="" onkeyup="doNext(this);"> c <br>

function doNext(el){                   
  if(event.keyCode=='13'){
    var nextEl = el.form.elements[el.tabIndex+1];
    if (nextEl && nextEl.focus) nextEl.focus();
  }
}

Answer 5

雖然帖子很舊，但希望我的回答能幫助到有需要的人。 我有一個類似的情況：

我有一個非常大的表單，用於員工調度程序應用程序，其中包含不同類型的輸入字段。 某些輸入字段有時隱藏，有時不隱藏。 我被要求將回車鍵用作 Tab 鍵，以便表單用戶在創建員工日程表時可以使用 10 鍵。 這是我解決問題的方法：

$(document).ready(function () {
    var allInputs = $(':text:visible'); //(1)collection of all the inputs I want (not all the inputs on my form)
    $(":text").on("keydown", function () {//(2)When an input field detects a keydown event
        if (event.keyCode == 13) {
            event.preventDefault();
            var nextInput = allInputs.get(allInputs.index(this) + 1);//(3)The next input in my collection of all inputs
            if (nextInput) {
                nextInput.focus(); //(4)focus that next input if the input is not null
            }
        }
    });
});

我必須做的是：

1. 創建一個我在使用 Tab 鍵時要考慮的所有輸入的集合。 就我而言，它是可見的文本輸入。
2. 在有問題的輸入上偵聽 keydown 事件，在我的情況下是所有文本字段輸入
3. 當在我的文本輸入上按下回車鍵時，確定接下來要聚焦的輸入。
4. 如果該輸入有效，請將其放在焦點上。

Answer 6

我正在使用此代碼前進到下一個輸入字段。 我討厭按 TAB 鍵。 此解決方案適用於 IE 和 Firefox：

<script type="text/javascript"> 
  function tabE(obj,e){ 
   var e=(typeof event!='undefined')?window.event:e;// IE : Moz 
   if(e.keyCode==13){ 
     var ele = document.forms[0].elements; 
     for(var i=0;i<ele.length;i++){ 
       var q=(i==ele.length-1)?0:i+1;// if last element : if any other 
       if(obj==ele[i]){ele[q].focus();break} 
     } 
  return false; 
   } 
  } 
</script> 

HTML 內容

<form id="main">
     <input name="" type="text" onkeypress="return tabE(this,event)">
     <input type="submit" value="Ok">
</form>

Answer 7

這是一個簡單的解決方案。 基本上，您包含 enter2tab.js 文件，然后在您希望 enter 被視為 js 的每個對象上添加 enter2tab 類。

https://github.com/AndreasGrip/enter2tab

您顯然可以查看代碼以了解它的作用和方式。

Answer 8

我相信使用 e.preventDefault(); 比返回 false 更安全。