Làm thế nào để chuyển đổi một phím nhập Nhấn vào một phím Tab Bấm cho các trang web

Question

Nhấn phím nhập sẽ hoạt động giống như một phím bấm phím. Nhập phím nhấn cho TextArea và nút gửi sẽ hoạt động bình thường. phần tử khi trường tiếp theo bị tắt/chỉ đọc.

cảm ơn,

Answer 1

Trước hết, điều này có lẽ không phải là ý tưởng tuyệt vời về khả năng sử dụng. Tuy nhiên, đây là một cái gì đó mà nên làm việc:

$(":input").on("keydown", function(event) { 
    if (event.which === 13 && !$(this).is("textarea, :button, :submit")) { 
     event.stopPropagation(); 
     event.preventDefault(); 

     $(this) 
      .nextAll(":input:not(:disabled, [readonly='readonly'])") 
      .first() 
      .focus(); 
    } 
}); 

Ví dụ:http://jsfiddle.net/NDcrk/

Các mảnh mà tìm đầu vào tiếp theo có thể phải thay đổi, tùy thuộc vào đánh dấu của bạn.

Answer 2

Tôi đã gặp sự cố tương tự, nơi tôi muốn nhấn + trên bàn phím số để chuyển sang trường tiếp theo. Bây giờ tôi đã phát hành một thư viện mà tôi nghĩ sẽ giúp bạn.

PlusAsTab: Một plugin jQuery để sử dụng khóa cộng với phím tab tương đương.

Vì bạn muốn nhập/↵ thay vào đó, bạn có thể thiết lập các tùy chọn. Tìm hiểu xem bạn muốn sử dụng khóa nào với số jQuery event.which demo.

JoelPurra.PlusAsTab.setOptions({ 
    // Use enter instead of plus 
    // Number 13 found through demo at 
    // https://api.jquery.com/event.which/ 
    key: 13 
}); 

HTML mẫu

<!-- Enable enter as tab as the default for all fields in this form --> 
<form data-plus-as-tab="true"> 
    <input type="text" value="Enter skips to the next field" autofocus="autofocus" /> 
    <!-- Exclude this textarea --> 
    <textarea data-plus-as-tab="false">Enter works as usual</textarea> 
    <input type="text" value="Enter skips to the next field" /> 
    <select><option>Enter skips here too</option></select> 
    <!-- Exclude this submit button --> 
    <button type="submit" data-plus-as-tab="false">Enter works as usual</button> 
</form> 

Như bạn thấy, thật dễ dàng để cho phép tất cả các yếu tố trong một container với data-plus-as-tab="true", và thật dễ dàng để loại trừ các yếu tố cụ thể với data-plus-as-tab="false". Bạn cũng có thể loại trừ một số loại nhất định (trên các phần tử hiện có) từ javascript với $('textarea, :button').plusAsTab(false);.

Bạn có thể tự mình thử nghiệm trong số PlusAsTab enter as tab demo.

Answer 3

Giải pháp này phù hợp với tôi. Thử nghiệm nó trên IE và 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> 

<form METHOD="POST"> 
    <input name="" type="text" onkeypress="return tabE(this,event)"> 
    <br> 
    <input name="" type="text" onkeypress="return tabE(this,event)"> 
    <br> 
    <input name="" type="text" onkeypress="return tabE(this,event)"> 
    <br> 
    <INPUT TYPE="submit" Value="Ok"> 
</form> 

Tôi tìm thấy nó here.

Answer 4

Cách kiểm tra phần tử biểu mẫu được hiển thị trong trường hợp này? Tôi có một đầu vào nhiều (hộp văn bản, nút radio,) nhưng một số yếu tố được hiển thị, một số yếu tố không được hiển thị

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

<form METHOD="POST"> 
<input name="" type="text" onkeypress="return tabE(this,event)"> 
<br> 
<input name="" type="text" onkeypress="return tabE(this,event)"> 
<br> 
<input name="" type="text" onkeypress="return tabE(this,event)"> 
<br> 
<INPUT TYPE="submit" Value="Ok"> 
</form>