Как преобразовать клавишу ввода Нажмите клавишу «Вкладка» Нажмите для веб-страниц

Question

Нажатие клавиши ввода должно работать как нажатие клавиши «Tab». Нажмите клавишу ввода для кнопки «TextArea» и «Submit», чтобы она работала как обычно. Фокус должен пропустить следующий элемент, когда следующее поле отключено/только для чтения.

спасибо,

Answer 1

Во-первых, это, вероятно, не очень хорошая идея использования. Однако, вот что-то, что должно работать:

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

Пример:http://jsfiddle.net/NDcrk/

Кусок, который находит следующий вход, возможно, придется изменить, в зависимости от вашей разметки.

Answer 2

У меня была аналогичная проблема, когда я хотел нажать + на numpad, чтобы перейти к следующему полю. Теперь я выпустил библиотеку, которая, я думаю, поможет вам.

PlusAsTab: Плагин jQuery для использования клавиши numpad plus в качестве эквивалента ключа табуляции.

Так как вы хотите ввести /↵ вместо этого, вы можете настроить параметры. Узнайте, какой ключ вы хотите использовать с 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

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

Как вы можете видеть, это легко включить все элементы в контейнере с data-plus-as-tab="true", и это легко исключить определенные элементы с data-plus-as-tab="false". Вы также можете исключить определенные типы (из существующих элементов) из javascript с помощью $('textarea, :button').plusAsTab(false);.

Вы можете попробовать себя в PlusAsTab enter as tab demo.

Answer 3

Это решение работает для меня. Протестировал его на 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> 

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

Я нашел его here.

Answer 4

Как проверить элемент формы в этом случае? У меня есть много ввода (текстовое поле, кнопка радио), но отображаются некоторые элементы, некоторые элементы не отображаются

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