Как конвертировать клавишу Enter Нажмите в клавишу Tab Нажмите для веб-страниц

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

Спасибо,

Источник

4 ответа

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

$(":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/

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

Источник

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

Я нашел это здесь.

Источник

Самый простой способ решить эту проблему с помощью функции фокуса JavaScript следующий:

Вы можете скопировать его и попробовать @ home!

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <input id="input1" type="text" onkeypress="pressEnter()" />
    <input id="input2" type="text" onkeypress="pressEnter2()" />
    <input id="input3" type="text"/>

    <script type="text/javascript">
    function pressEnter() {
      // Key Code for ENTER = 13
      if ((event.keyCode == 13)) {
        document.getElementById("input2").focus({preventScroll:false});
      }
    }
    function pressEnter2() {
      if ((event.keyCode == 13)) {
        document.getElementById("input3").focus({preventScroll:false});
      }
    }
    </script>

  </body>
</html>
Источник

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

<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>
Источник

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

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

Поскольку вместо этого вы хотите ввести/↵, вы можете установить параметры. Узнайте, какой ключ вы хотите использовать с демонстрацией jQuery.

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, войдите в качестве демонстрационной вкладки.

Источник
Другие вопросы по тегам