Чому форми з одним полем введення подаються при натисканні клавіші Enter у введенні

Question 1

Чому так, що <form>з одним <input>полем перезавантажує форму, коли користувач вводить значення і натискає Enter, а це не так, якщо в полі є 2 або більше полів <form>?.

Я написав просту сторінку, щоб перевірити це дивацтво.

Якщо ви введете значення у другій формі та натиснете Enter, ви побачите, що воно перезавантажує сторінку, що передає введене значення, ніби ви телефонували GET. чому? і як мені цього уникнути?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testFormEnter</title>
</head>
<body>
<form>
  <input type="text" name="partid2" id="partid2" />
  <input type="text" name="partdesc" id="partdesc"  />
</form>
  <p>2 field form works fine</p>
<form>
<input type="text" name="partid" id="partid"  />
</form>
<p>One field form reloads page when you press the Enter key why</p>
</body>
</html>

Question 2

Це маловідома "Примха", яка вийшла вже деякий час. Я знаю, що деякі люди вирішували це різними способами.

На мою думку, найпростіший байпас - це просто друге введення, яке не відображається користувачеві. Звичайно, не все так зручно для користувача на серверній системі, але він працює над вирішенням проблеми.

Слід зазначити, що найчастіше я чую про цю проблему саме з IE, а не з FireFox чи іншими. Хоча, здається, це впливає і на них.

Question 3

Це відома помилка в IE6 / 7/8 . Не схоже, що ви отримаєте це виправлення.

Найкраще обхідне рішення, яке ви можете зробити для цього, - це додати ще одне приховане поле (якщо це дозволяє ваша інженерна совість). IE більше не подаватиме форму автоматично, коли виявить, що у формі є два поля типу вводу.

Оновлення

Якщо вам було цікаво, чому це так, цей самоцвіт виходить прямо із специфікації HTML 2.0 (Розділ 8.2) :

Якщо у формі є лише одне однорядкове поле введення тексту, агент користувача повинен прийняти Enter у цьому полі як запит на подання форми.

Question 4

Ні, поведінка за замовчуванням полягає в тому, що при введенні подається останнє введення у формі. Якщо ви взагалі не хочете подавати заявку, можете додати:

<form onsubmit="return false;">

Або у вашому введенні

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

Звичайно, є більш гарні рішення, але вони простіші, без будь-якої бібліотеки чи фреймворку.

Question 5

Натискання клавіші Enter працює по-різному, залежно від (а) кількості полів та (б) кількості кнопок подання. Він може нічого не робити, він може надіслати форму без жодної кнопки "успішного" надсилання, або може зробити вигляд, що натиснуто першу кнопку надсилання (навіть генеруючи натискання для неї!), І подати із значенням цієї кнопки.

Наприклад, якщо ви додасте форму input type="submit"до двох полів, ви помітите, що вона надсилається.

Це давня химерність браузера, що сягає, принаймні, раннього Netscape (можливо, і далі), який навряд чи буде змінено зараз.

<форма>

Недійсний без "дії". Якщо ви не збираєтеся подавати де-небудь, і вам не потрібна групування назв перемикачів, ви можете просто опустити елемент форми.

Question 6

Ось код, який я використовував для вирішення проблеми:

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

Question 7

Це не перезавантаження сторінки як такої, це подання форми.

Однак у цьому прикладі, оскільки у вас немає атрибуту дії у формі, яку вона подає сама, що створює враження перезавантаження сторінки.

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

Можливо, ви захочете спробувати це ще в різних браузерах.

Question 8

як вже сказав vineet, це коріняться в специфікації html 2.0:

ось як запобігти цьому, не псуючи свої URL-адреси:

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

Question 9

Дякуємо всім, хто відповів. Відкриває око, що форма з одним полем діє по-різному, ніж форма з багатьма полями.

Іншим способом боротьби з цим автоматичним надсиланням є кодування функції подання, яка повертає false.

У моєму випадку у мене була кнопка з подією onclick, тому я перемістив виклик функції із доданим returnключовим словом до події onsubmit. Якщо функція, що викликається, повертає false, подання не відбудеться.

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

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

Question 10

Рішення, яке я знайшов для всіх перевірених браузерів (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>

Question 11

Ця проблема виникає як в IE, так і в Chrome. Це не відбувається у Firefox. Простим рішенням було б додати наступний атрибут до тегу форми: onsubmit = "return false"

Це, звичайно, припускаючи, що ви подаєте форму за допомогою об’єкта XMLHttpRequest.

Question 12

Так, форма з одним полем inputText працює так, як у 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" />

Question 13

Я вирішив це за допомогою наступного коду, але я не впевнений, що це хороший підхід. Шукаючи поля введення у заданій формі і якщо 1 перешкоджає дії за замовчуванням.

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

Question 14

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