Почему формы с одним полем ввода отправляются при нажатии клавиши ввода на входе

Ответ 1

Это малоизвестный "Quirk", который уже давно вышел. Я знаю, что некоторые люди решили это по-разному.

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

Я должен отметить, что наиболее распространенное место, которое я слышу об этой проблеме, - это IE, а не FireFox или другие. Хотя это, похоже, влияет и на них.

Ответ 2

Это известная ошибка в IE6/7/8. Не похоже, что вы получите исправление.

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

Обновление

В случае, если вам интересно, почему это так, этот камень исходит из спецификации HTML 2.0 (раздел 8.2):

Если в форме есть только однострочное текстовое поле ввода, пользовательский агент должен принять Enter в этом поле в качестве запроса на отправку форма.

Ответ 3

Нажатие Enter работает по-разному в зависимости от (а) количества полей и (б) количества кнопок отправки. Он ничего не может сделать, он может отправить форму без кнопки "успешный" отправки или может притворяться, что нажата первая кнопка отправки (даже генерируется onclick для нее!) И отправляется с этим значением кнопки.

Например, если вы добавите input type="submit" в свою двухполевую форму, вы заметите, что она тоже отправляет.

Это древняя брошюра браузера, которая вернется, по крайней мере, до раннего Netscape (возможно, дальше), что вряд ли будет изменено сейчас.

< формa >

Недействительно без действия. Если вы не собираетесь отправлять нигде, и вам не нужна группировка имен кнопок, вы можете просто полностью опустить элемент формы.

Ответ 4

Ниже приведен код, который я использовал для решения проблемы:

<form>
<input type="text" name="partid" id="partid"  />
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" />
</form>

Ответ 5

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

<form onsubmit="return false;">

Или на вашем входе

<input ... onkeypress="return event.keyCode != 13;">

Конечно, есть более красивые решения, но они проще без какой-либо библиотеки или фреймворка.

Ответ 6

Это не перезагружает страницу как таковую, она отправляет форму.

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

Кроме того, я не могу воспроизвести описанное вами поведение. Если я нахожусь в любом текстовом входе в форме, и я нажимаю Enter, он отправляет форму, независимо от того, где в форме находится вход или сколько входов есть.

Возможно, вы захотите попробовать еще немного в разных браузерах.

Ответ 7

как уже говорилось, это укоренено в спецификации html 2.0:

вот как это предотвратить, не засовывая ваши URL:

<form>
    <input type="text" name="partid" id="partid"  />
    <input type="text" style="display: none;" />
</form>

Ответ 8

Спасибо всем, кто ответил. Это открытие для глаз, что форма с одним полем действует иначе, чем форма со многими полями.

Другой способ справиться с этим автоматическим представлением - это код функции отправки, которая возвращает false.

В моем случае у меня была кнопка с событием onclick, поэтому я переместил вызов функции с добавленным ключевым словом return в событие onsubmit. Если вызванная функция возвращает false, submit не будет.

<form onsubmit="return ajaxMagic()">
<input type="text" name="partid" id="partid"  />
<input type="submit" value="Find Part" />
</form

function ajaxMagic() {
  ...
  return (false);
}

Ответ 9

Решение, которое я нашел для всех браузеров, которые я тестировал (IE, FF, Chrome, Safari, Opera), состоит в том, что первый элемент ввода type=submit в форме должен быть видимым и должен быть первым элементом в форма. Я смог использовать размещение CSS, чтобы переместить кнопку отправки в нижнюю часть страницы, и это не повлияло на результаты!

<form id="form" action="/">
<input type="submit" value="ensures-the-enter-key-submits-the-form"
                      style="width:1px;height:1px;position:fixed;bottom:1px;"/>
<div id="header" class="header"></div>
<div id="feedbackMessages" class="feedbackPanel"></div>
     ...... lots of other input tags, etc...
</form>

Ответ 10

Эта проблема возникает как в IE, так и в Chrome. Это не происходит в Firefox. Простым решением было бы добавить в тег формы следующий атрибут: onsubmit = "return false"

Это, конечно, предполагается, что вы отправляете форму с помощью объекта XMLHttpRequest.

Ответ 11

Да, форма с одним полем вводаText, работающим по-разному в HTML 4.
onSubmit return false не работает для меня, но ошибка исправления ниже работает нормально

<!--Fix  IE6/7/8 and  HTML 4 bug -->
    <input style="display:none;" type="text" name="StackOverflow1370021" value="Fix IE bug" />

Ответ 12

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

 if($j("form#your-form input[type='text']").length == 1) {
   $j(this).bind("keypress", function(event) {
     if(event.which == 13) {
       event.preventDefault();
     }
   });
 }

Ответ 13

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