Запретить отправку формы клавишей ввода - PullRequest
Новая
       7

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

56 голосов
/ 14 октября 2009

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

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

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

Ответы [ 10 ]

52 голосов
/ 14 октября 2009

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

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

33 голосов
/ 25 августа 2012

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

<form action="/search.php" method="get">
<input type="text" name="keyword" />
<input type="text" style="display: none;" />
</form>
26 голосов
/ 14 октября 2009

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

  1. Запрещает работать клавише ввода на любой элемент формы другой чем текстовая область, кнопка, отправить.
  2. Клавиша ввода теперь работает как вкладка.
  3. protectDefault (), stopPropagation () вызывается для элемента в порядке, но вызывается в форме, кажется, останавливает событие, чтобы когда-либо получить элемент.

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

Вызывать .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;
        }
    }
}
8 голосов
/ 03 февраля 2011

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

3 голосов
/ 17 мая 2012

Клавиша ввода Enter в качестве кнопки по умолчанию описывает, как установить поведение по умолчанию для нажатия клавиши ввода. Однако иногда вам нужно отключить отправку формы при нажатии клавиши Enter. Если вы хотите полностью предотвратить это, вам нужно использовать обработчик 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

0 голосов
/ 17 апреля 2019

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

$(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;
        }
    }
}
0 голосов
/ 04 сентября 2016

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

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

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

0 голосов
/ 03 апреля 2016

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

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

в 

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;
0 голосов
/ 01 апреля 2013

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

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

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

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

0 голосов
/ 14 октября 2009

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...