Подтвердить что ты не робот

Запретить отправку формы с помощью клавиши ввода

Я только что написал эту изящную маленькую функцию, которая работает на самой форме...

$("#form").keypress(function(e) {
    if (e.which == 13) {
        var tagName = e.target.tagName.toLowerCase(); 
        if (tagName !== "textarea") {
            return false;
        }
    }
});

В моей логике я хочу принять возврат каретки во время ввода текстовой области. Кроме того, было бы дополнительным бонусом заменить поведение клавиши ввода полей ввода на поведение перехода на следующее поле ввода (как если бы была нажата клавиша табуляции). Кто-нибудь знает, как использовать модель распространения событий, чтобы правильно запустить клавишу ввода на соответствующем элементе, но предотвратить отправку формы при его нажатии?

4b9b3361

ОТВЕТЫ

Ответ 1

Вот модифицированная версия моей функции. Он выполняет следующие действия:

  • Предотвращает работу ключа ввода на любой элемент формы другой чем текстовое поле, кнопка, отправить.
  • Теперь клавиша ввода действует как вкладка.
  • preventDefault(), stopPropagation(), вызываемый в элементе, является точным, но вызывается в форме, похоже, останавливает событие от когда-либо попадания в элемент.

Итак, моим обходным путем является проверка типа элемента, если тип не является текстовым полем (входит в разрешенное) или кнопкой /submit (введите = щелчок), тогда мы просто переходим к следующей вещи.

Вызов .next() в элементе не полезен, потому что другие элементы могут быть не просто родственными братьями, однако, поскольку DOM в значительной степени гарантирует порядок при выборе так, чтобы все было хорошо.

function preventEnterSubmit(e) {
    if (e.which == 13) {
        var $targ = $(e.target);

        if (!$targ.is("textarea") && !$targ.is(":button,:submit")) {
            var focusNext = false;
            $(this).find(":input:visible:not([disabled],[readonly]), a").each(function(){
                if (this === e.target) {
                    focusNext = true;
                }
                else if (focusNext){
                    $(this).focus();
                    return false;
                }
            });

            return false;
        }
    }
}

Ответ 2

Вы можете имитировать нажатие клавиши табуляции вместо ввода на входах следующим образом:

//Press Enter in INPUT moves cursor to next INPUT
$('#form').find('.input').keypress(function(e){
    if ( e.which == 13 ) // Enter key = keycode 13
    {
        $(this).next().focus();  //Use whatever selector necessary to focus the 'next' input
        return false;
    }
});

Вам, очевидно, нужно будет выяснить, какие селектор необходимы, чтобы сфокусироваться на следующем входе, когда нажата клавиша Enter.

Ответ 3

Обратите внимание, что при нажатии клавиши ввода всегда подаются одиночные формы ввода. Единственный способ предотвратить это:

<form action="/search.php" method="get">
<input type="text" name="keyword" />
<input type="text" style="display: none;" />
</form>

Ответ 4

С точки зрения удобства использования изменение поведения ввода для имитации вкладки - очень плохая идея. Пользователи используют клавишу ввода для отправки формы. То, как работает Интернет. Вы не должны нарушать это.

Ответ 5

Клавиша ввода ввода в качестве кнопки по умолчанию описывает, как установить поведение по умолчанию для нажатия клавиши ввода. Однако иногда вам нужно отключить отправку формы при нажатии клавиши ввода. Если вы хотите полностью его предотвратить, вам нужно использовать обработчик OnKeyPress на теге вашей страницы.

<body OnKeyPress="return disableKeyPress(event)">

Код javascript должен быть:

<script language="JavaScript">

function disableEnterKey(e)
{
     var key;      
     if(window.event)
          key = window.event.keyCode; //IE
     else
          key = e.which; //firefox      

     return (key != 13);
}

</script>

Если вы хотите отключить отправку формы при нажатии клавиши ввода в поле ввода, вы должны использовать функцию выше в обработчике OnKeyPress поля ввода следующим образом:

<input type="text" name="txtInput" onKeyPress="return disableEnterKey(event)">

Источник: http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx

Ответ 6

Задайте триггер как для формы, так и для входов, но когда инициируются входные события, остановите распространение формы, вызвав stopPropagation.

Кстати, ИМХО, неважно менять поведение по умолчанию на что-либо, к которому привык любой обычный пользователь - что делает их сердитыми при использовании вашей системы. Но если вы настаиваете, то способ stopPropagation - это путь.

Ответ 7

В моем случае я хотел предотвратить это только в динамически создаваемом поле и активировать какую-то другую кнопку, так что это было немного немного.

$(document).on( 'keypress', '.input_class', function (e) {
    if (e.charCode==13) {
        $(this).parent('.container').children('.button_class').trigger('click');
        return false;
    }
});

В этом случае он будет улавливать клавишу ввода на всех входах этого класса и будет запускать кнопку рядом с ними, а также предотвращать отправку первичной формы.

Обратите внимание, что вход и кнопка должны находиться в одном контейнере.

Ответ 8

Предыдущие решения не работали для меня, но я нашел решение.

Это ждет любого нажатия клавиши, теста, который соответствует 13, и возвращает false, если это так.

в <HEAD> 

function stopRKey(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  if ((evt.which == 13) && (node.type == "text")) {
    return false;
  }
}

document.onkeypress = stopRKey;

Ответ 9

Я предпочитаю решение @Dmitriy Likhten, но: он работал только тогда, когда я немного изменил код:

[...] else 
            { 
             if (focusNext){
                $(this).focus();
                return false; } //  
            }

В противном случае script не работает. Использование Firefox 48.0.2

Ответ 10

Я немного изменил ответ Дмитрия Лихтена, работает хорошо. Включено, как ссылаться на функцию к событию. обратите внимание, что вы не включили () или он будет выполнен. Мы просто передаем ссылку.

$(document).ready(function () {
    $("#item-form").keypress(preventEnterSubmit);
});

function preventEnterSubmit(e) {
    if (e.which == 13) {
        var $targ = $(e.target);

        if (!$targ.is("textarea") && !$targ.is(":button,:submit")) {
            var focusNext = false;
            $(this).find(":input:visible:not([disabled],[readonly]), a").each(function () {
                if (this === e.target) {
                    focusNext = true;
                } else {
                    if (focusNext) {
                        $(this).focus();
                        return false;
                    }
                }
            });

            return false;
        }
    }
}