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

Question

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

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

$("#form").keypress(function(e){

    if (e.which == 13) {

       var tagName = e.target.tagName.toLowerCase(); 

       if (tagName !== "textarea") {

           return false;

       }

   }

}

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

599 9

jQuery javascript html

9 ответов:

Comments

Ничего не найдено.

Jake Wilson · Accepted Answer · 2013-12-17 00:47:54

вы можете имитировать нажатие клавиши tab вместо ввода на входах следующим образом:
//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.

philipphoffmann · Accepted Answer · 2012-10-20 14:44:29

обратите внимание, что одиночные формы ввода всегда отправляются при нажатии клавиши enter. Единственный способ предотвратить это:
<form action="/search.php" method="get">
<input type="text" name="keyword" />
<input type="text" style="display: none;" />
</form>

Dmitriy Likhten · Accepted Answer · 2009-10-14 17:20:48

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

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

клавиша enter теперь действует как вкладка.

preventDefault (), stopPropagation () вызывается на элементе нормально, но вызывается на форме, кажется, остановить событие от когда-либо добраться до элемента.

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

вызов .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;
        }
    }
}

Jarón Barends · Accepted Answer · 2011-02-03 11:39:19

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

M009 · Accepted Answer · 2012-05-17 16:27:24

кнопка post Enter в качестве кнопки по умолчанию описывает, как установить поведение по умолчанию для нажатия клавиши 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>
Если вы хотите отключить отправку формы при нажатии клавиши enter в поле ввода, вы должны использовать функцию выше на Метода onkeypress обработчик поля ввода следующим образом:
<input type="text" name="txtInput" onKeyPress="return disableEnterKey(event)">
Источник: http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx

Seb · Accepted Answer · 2009-10-14 00:45:20

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

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

Julio Popócatl · Accepted Answer · 2013-04-01 11:53:33

в моем случае я хотел предотвратить это только в динамически созданном поле и активировать какую-то другую кнопку, поэтому это было немного по-другому.
$(document).on( 'keypress', '.input_class', function (e) {
    if (e.charCode==13) {
        $(this).parent('.container').children('.button_class').trigger('click');
        return false;
    }
});
в этом случае он поймает клавишу enter на всех входных данных с этим классом и запустит кнопку рядом с ними, а также предотвратит отправку основной формы.

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

CuriousChad · Accepted Answer · 2016-04-03 04:36:54

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

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

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

davidman77 · Accepted Answer · 2016-09-04 09:50:08

Я предпочитаю решение @Dmitriy Likhen, пока: это сработало только тогда, когда я немного изменил код:
[...] else 
            { 
             if (focusNext){
                $(this).focus();
                return false; } //  
            }     
в противном случае скрипт не работал. Использование Firefox 48.0.2