Làm thế nào để mô phỏng TAB trên ENTER nhấn phím trong javascript hoặc jQuery

Question

Tôi muốn thay đổi mã khóa trong phím tắt (nhấn phím) trong tất cả đầu vào trong một trang. Tôi muốn thay thế Nhập mã khóa bằng mã khóa TAB. Làm thế nào tôi có thể làm điều này?

nhờ

---

EDIT 1)

xem xét mã này:

<div> 
    <asp:RadioButtonList ID="RadioButtonList1" runat="server"> 
     <asp:ListItem>1</asp:ListItem> 
     <asp:ListItem>2</asp:ListItem> 
     <asp:ListItem>3</asp:ListItem> 
     <asp:ListItem>4</asp:ListItem> 
    </asp:RadioButtonList> 
    <br /> 
    <br /> 
    <asp:TextBox ID="TextBox1" runat="server">3333</asp:TextBox> 
    <br /> 
    <br /> 
    <asp:DropDownList ID="DropDownList1" runat="server"> 
     <asp:ListItem>1</asp:ListItem> 
     <asp:ListItem>2</asp:ListItem> 
     <asp:ListItem>3</asp:ListItem> 
    </asp:DropDownList> 
</div> 

Tôi muốn khi người dùng nhấn Enter trên ENY tập trung kiểm soát trên đi để điều khiển tiếp theo.

nhờ

Answer 1

Tôi nghĩ rằng công việc này:

$('input').live("keypress", function (e) { 
     /* ENTER PRESSED*/ 
     var OffSet = 0; 
     if (e.keyCode == 13) { 
      /* FOCUS ELEMENT */ 
      if ($(this).is("input[type='radio']")) { 
       var tblID = $(this).closest('table').attr('id'); 
       var radios = $('#' + tblID).find(":input"); 
       //alert(radios.index(this)); 
       OffSet = radios.length - radios.index(this) - 1; 
      } 
      //alert(OffSet); 

      var inputs = $(this).parents("form").eq(0).find(":input"); 
      var idx = inputs.index(this); 
      inputs[idx + OffSet].blur(); 

      try { 
       inputs[idx + OffSet].selectionStart = inputs[idx + OffSet].selectionEnd = -1; 
      } catch (e) { 

      } 
      if (idx == inputs.length - 1) { 
       inputs[0].select(); 
      } else { 
       inputs[idx + 1 + OffSet].focus(); // handles submit buttons 
       try { 
        inputs[idx + 1 + OffSet].select(); 
       } catch (e) { 
       } 
      } 
      return false; 
     } 
    }); 

Answer 2

Hope này hoạt động

$('input,textarea').keydown(function(){ 
    if(event.keyCode==13) { 
    event.keyCode = 9; 
    } 
}); 

Sửa

Hãy thử http://jsfiddle.net/GUmUg/ này. Chơi xung quanh với bộ chọn để làm công việc này như tôi không biết asp

$('input,textarea').keypress(function(e){ 
    if(e.keyCode==13) { 
    $(this).next().focus(); 
    } 
}); 

Answer 3

Mã này là để thay thế nhập với ký tự tab:

$("#wmd-input").bind("keypress", function(e) { 
    if (e.keyCode == 13) { 
     var input = $(this); 
     var inputVal = input.val(); 
     setTimeout(function() { 
     input.val(inputVal.substring(0,inputVal.length) + "\t"); 
     }, 1); 
    } 
}); 

Live Demo

UPDATE:

Mã này là để tập trung vào yếu tố tiếp theo:

$(document).ready(function() { 
    $("input,select").bind("keydown", function (e) { 
     if (e.keyCode == 13) { 
      var allInputs = $("input,select"); 
      for (var i = 0; i < allInputs.length; i++) { 
       if (allInputs[i] == this) { 
        while ((allInputs[i]).name == (allInputs[i + 1]).name) { 
         i++; 
        } 

        if ((i + 1) < allInputs.length) $(allInputs[i + 1]).focus(); 
       } 
      } 
     } 
    }); 
}); 

Answer 4

$('input').on('keydown',function(e){ 
    var keyCode = e.keyCode || e.which; 
    if(e.keyCode === 13) { 
     e.preventDefault(); 
     $('input')[$('input').index(this)+1].focus(); 
     } 
}); 

séc fiddle đây: http://jsfiddle.net/Pd5QC/

Answer 5

Tôi đã có một vấn đề tương tự, nơi mà tôi muốn nhấn + trên numpad để tab 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 
}); 

Sau đó, kích hoạt tính năng bằng cách thêm plus-as-tab="true" đến các trường mẫu bạn muốn sử dụng nhập-as-tab trong, hoặc một số yếu tố khác có chứa các biểu mẫu form. Nút radio không phải là vấn đề vì chúng được bao phủ bởi thư viện khác của tôi, EmulateTab - xem autonavigation of radio buttons in that demo.

<div plus-as-tab="true"> 
    <!-- all focusable elements inside the <div> will be enabled --> 
    <asp:RadioButtonList ID="RadioButtonList1" runat="server"> 
    <!-- Radio buttons should not be a problem. --> 
    </asp:RadioButtonList> 
</div> 

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

Answer 6

Cách tôi làm điều đó là sử dụng jquery cho mỗi lựa chọn của bạn và tập trung vào phần tử sau khi hiện tại bạn đang bật.

$(document).on('keyup', '.my-input', function (ev) { 

    if (ev.keyCode == '13') { 
     var currentInput = this; 
     var isOnCurrent = false; 

     $('.my-input').each(function() { 

      if (isOnCurrent == true) { 
       $(this).focus(); 
       return false; 
      } 

      if (this == currentInput) { 
       isOnCurrent = true; 
      } 

     }); 
    } 
}); 

Answer 7

Tôi đã tạo một simple jQuery plugin giải quyết vấn đề này. Nó sử dụng bộ chọn ': tabbable' của jQuery UI để tìm phần tử 'tabbable' tiếp theo và chọn nó. sử dụng

Ví dụ:

// Simulate tab key when enter is pressed   
$('.myElement').bind('keypress', function(event){ 
    if(event.which === 13){ 
     if(event.shiftKey){ 
      $.tabPrev(); 
     } 
     else{ 
      $.tabNext(); 
     } 
     return false; 
    } 
}); 

Answer 8

$(document).ready(function() { 

//Objetos con CssClass="EntTab" sustituye el Enter (keycode 13) por un Tabulador (keycode 9)!! 

    $(".EntTab").bind("keypress", function(e) { 
     if (e.keyCode == 13) { 
      var inps = $("input, select"); //add select too 
      for (var x = 0; x < inps.length; x++) { 
       if (inps[x] == this) { 
        while ((inps[x]).name == (inps[x + 1]).name) { 
         x++; 
        } 
        if ((x + 1) < inps.length) $(inps[x + 1]).focus(); 
       } 
      } e.preventDefault(); 
     } 
    }); 
});