Làm cách nào để buộc "nhập khóa" hoạt động như "khóa tab" bằng javascript?

Question

Tôi đang làm việc trên một trang web có đầy đủ các biểu mẫu để điền và tôi được yêu cầu khi nhấn nút thoát được di chuyển tiêu điểm đến điều khiển nhập tiếp theo, cũng giống như nhấn "tab". tôi thấy mã để di chuyển tập trung khi keyPressed là 13 nhưng nhu cầu này để có những ID của yếu tố tập trung vào

<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> 

Tôi cần một hàm tổng quát rằng khi phím bấm code is 13 "có nghĩa là nhập" bắn mặc định trường hợp nhấn 9 "đó là tab", tất nhiên trong Javascript

Answer 1

xử lý bấm phím thay vào đó và trả về false lại cho trình duyệt:

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 2

Thao tác này sẽ xử lý nhiều trường nhập.

Dưới đây là phiên bản 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" />

Dưới đây là phiên bản javascript tinh khiết: http://jsfiddle.net/TnEB5/5/ (có thể bạn muốn để có được các anh chị em khác nhau)

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 3

<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 4

Tôi tin rằng sử dụng e.preventDefault(); an toàn hơn là trả về false.

Answer 5

Bạn cần đặt rõ ràng thuộc tính tabindex của các trường nhập cho một giải pháp chung. Một cái gì đó như

<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> 

giải pháp này sử dụng jquery để gán xử lý sự kiện cho tất cả các yếu tố loại đầu vào trên trang web, bộ tập trung vào yếu tố với các thuộc tính tabIndex cao nhất tiếp theo, và ngăn ngừa các hình thức từ nộp khi nhập được nhấn bằng e.preventDefault(). Dưới đây là một số jfiddle

Answer 6

Mặc dù bài đăng cũ, tôi hy vọng câu trả lời của tôi có thể giúp ai đó có nhu cầu. Tôi có một tình huống tương tự:

Tôi có một hình thức rất lớn rất lớn cho ứng dụng lập lịch biểu nhân viên với các loại trường nhập khác nhau. Một số lĩnh vực đầu vào được ẩn đôi khi và không phải lần khác. Tôi đã được yêu cầu làm cho phím enter hoạt động như phím tab để người dùng của biểu mẫu có thể sử dụng khóa 10 khi tạo lịch trình nhân viên của họ. Dưới đây là cách tôi giải quyết vấn đề của tôi:

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

Những gì tôi phải làm là:

1. Tạo một bộ sưu tập của tất cả các yếu tố đầu tôi muốn xem xét khi tabbing. trong trường hợp của tôi, đó là các đầu vào văn bản được hiển thị.
2. Lắng nghe sự kiện keydown trên các đầu vào được đề cập, trong trường hợp của tôi, tất cả trường nhập văn bản
3. Khi nhập được nhập vào văn bản của tôi, xác định đầu vào nào sẽ được tập trung tiếp theo.
4. Nếu đầu vào đó hợp lệ, hãy đưa nó vào tiêu điểm.