Остановить клавишу Enter / Return при отправке формы

У меня есть таблица в форме. Таблица содержит некоторые поля формы, но есть и поля формы вне таблицы (но все еще внутри формы).

Я знаю, что клавиши Enter и Return традиционно используются для отправки формы с клавиатуры, но я хочу остановить такое поведение для полей в таблице. Например, если я сфокусирую поле в таблице и нажму Enter / Return, ничего не произойдет. Если я сфокусирую поле за пределами таблицы (но все еще внутри формы), тогда оно будет отправлено как обычно.

У меня есть плагин jQuery, предназначенный для этой таблицы. Проще говоря, это то, что я пробовал так далеко:

base.on('keydown', function(e) {
    if (e.keyCode == 13) {
        e.stopPropagation();
        return false;
    }
});

Где base - объект таблицы jQuery. Это в init методе моего плагина. Однако нажатие Enter по-прежнему отправляет форму.

Где я ошибаюсь?

РЕДАКТИРОВАТЬ: Упрощенный HTML:

<form method="" action="">
  <input type="text" /><!--this should still submit on Enter-->
  <table>
    <tbody>
      <tr>
        <td>
          <input type="text" /><!--this should NOT submit on Enter-->
        </td>
      </tr>
    </tbody>
  </table>
</form>

person Martin Bean    schedule 25.04.2012    source источник
comment
Возможный дубликат stackoverflow.com/questions/1563062 / и stackoverflow.com/questions/895171/   -  person Mark Walters    schedule 25.04.2012
comment
Вы должны упомянуть, что такое base, он выглядит как объект jquery, но не соответствует соглашениям об именах.   -  person gdoron is supporting Monica    schedule 25.04.2012
comment
@gdoron Я сделал. Это самое первое предложение после первого блока кода! Где base - объект таблицы jQuery.   -  person Martin Bean    schedule 25.04.2012
comment
@MartinBean. извините, но соглашения об именах - это то, чему вы действительно хотите следовать. извините за то, что был тупым.   -  person gdoron is supporting Monica    schedule 25.04.2012
comment
@gdoron Как я уже сказал, JavaScript был упрощен, но имя base происходит от этого плагина: starter.pixelgraphics.us < / а>   -  person Martin Bean    schedule 25.04.2012


Ответы (6)


base.keypress(function(e) {
    var code = e.keyCode || e.which;
    if(code == 13)
        return false;
});

или только для входов:

$(':input', base).keypress(function(e) {
    var code = e.keyCode || e.which;
    if(code == 13)
        return false;
});
person gdoron is supporting Monica    schedule 25.04.2012
comment
Пожалуйста, перечитайте вопрос. Я по-прежнему хочу, чтобы поведение по умолчанию работало с элементами управления формы за пределами моей таблицы. - person Martin Bean; 25.04.2012
comment
Поэтому вам нужно проверить, находится ли какой-либо из элементов (входов) в таблице в фокусе при нажатии клавиши ввода. - person Mark Walters; 25.04.2012
comment
@gdoron Могу ли я сделать это из моего плагина вверх, а не из формы? Например, я не хочу, чтобы он применялся к входам любой формы с таблицей. - person Martin Bean; 25.04.2012
comment
@gdoron Я хочу остановить отправку входных данных внутри таблиц, к которым применяется мой плагин, а не только для любой таблицы внутри формы, которая имеет вход. - person Martin Bean; 25.04.2012
comment
@MartinBean. чем мой обновленный ответ должен позаботиться об этом, не так ли? - person gdoron is supporting Monica; 25.04.2012
comment
Идеально. Добрался до конца. Я изменил свое keyup имя события на keypress, и теперь у меня есть желаемая функциональность. Спасибо! - person Martin Bean; 25.04.2012

e.preventDefault(), а не e.stopPropagation(). stopPropagation только останавливает его переход на более высокие узлы DOM, он не предотвращает действие по умолчанию.

person Chris Neale    schedule 25.04.2012
comment
return false делает и то, и другое ... - person gdoron is supporting Monica; 25.04.2012
comment
Итак, если в моем коде указано return false, почему форма все еще отправляется? - person Martin Bean; 25.04.2012
comment
Это не лично против вас, но, хотя этот ответ был одобрен, он неверен. return false == e.preventDefault(); e.stopPropagation(); - person gdoron is supporting Monica; 25.04.2012
comment
Думаю, тебе тоже нужно пересмотреть свой ответ, gdoron. Ваш нацелен на любую таблицу в любой форме, тогда как я только хочу нацеливать входные данные в таблице, к которой применяется мой плагин. - person Martin Bean; 25.04.2012

Я собираюсь предположить, что элемент формы запускает событие отправки, оно не всплывает через таблицу и не переходит в форму, попробуйте этот instread:

$('input, select, textarea', base).on('keydown', function(e) {
    if (e.keyCode == 13) {
        return false;
    }
});

Обратите внимание, что мы также предоставляем контекст для селектора, поэтому keyDown будет происходить только для элементов (при необходимости измените) в вашей таблице.

Как сказал Гордан в другом комментарии, return false выполняет как .preventDefault(), так и .stopPropagation()

person Ben Everard    schedule 25.04.2012
comment
Вам нужно ограничить селектор только входами внутри формы \ таблицы. а собственно это гдорон не гордан ... :) - person gdoron is supporting Monica; 25.04.2012
comment
Это то, что делает второй параметр base в селекторе, где base - моя таблица как объект jQuery. - person Martin Bean; 25.04.2012
comment
К сожалению, моя ошибка в имени: P, но она ограничивается таблицей, поскольку base является объектом таблицы. - person Ben Everard; 25.04.2012

Я обнаружил, что этот вопрос / ответ пытается разобраться в аналогичной ситуации, когда у меня есть несколько форм, и ввод не будет делать то, что я хотел. В моем конкретном случае я бы динамически добавил новый <div id="D1"> D1, D2, D3 и т.д., и каждый новый div имеет форму, которая перезагружает этот div из того же php-кода, который его создал, только также с помощью POST.

Несвязанная первая проблема заключалась в том, что я не мог динамически создавать новую функцию с каждым div, поэтому я передал дескриптор D1 и т. Д. В качестве аргумента функции Javascript:

<script type="text/javascript">
function formSubmit ( divid ) {
    // post data
    event.preventDefault();
    $.post( "make-my-form-div.php", 
            $("#form"+divid).serialize(), 
            function(data){
                $("#"+divid).html(data);
            });
    return false;
}
</script>

Вы увидите необходимые event.preventDefault(); и return false;, которые подходят для ответов в этой теме. У меня это не сработало. Если я нажму «Отправить» в какой-либо форме, этот div перезагрузится с правильными данными. Нажатие Enter вызовет действие по умолчанию и перезагрузит всю страницу, оставив мне только 1 div.

Этот ответ сработал: мне нужен был уникальный идентификатор и имя для разных форм. Изначально это были <INPUT TYPE="button" VALUE="Submit" onClick="formSubmit('<?php echo $divid ?>');">, но как только я добавил уникальный ID и ИМЕНА, такие как "formD1" и т. Д., Все начало работать правильно.

person Chris K    schedule 03.06.2014

У меня это работает.

$("input[type='text']").on('keypress', function(e) { return e.keyCode != 13; });
person Riyaz Hameed    schedule 20.06.2014

Просто введите приведенный ниже код в файл шаблона или в заголовок страницы.

<script type="text/javascript">

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

document.onkeypress = stopRKey;

</script> 
person Gokul Shinde    schedule 12.08.2015