В IE8 ввести ключ в форму не работает

У меня проблема, что в IE8 ввод не работает, чтобы отправить форму. Я создал тестовую страницу, чтобы выявить эту проблему. Кажется, что отображение формы в функции onLoad отключает результаты, что кнопка enter больше не запускает отправку. Это ошибка в IE8 или проблема с ней?

Код для воспроизведения:

onload = function() { 
    document.getElementById('test').style.display = 'block'; 
} 
#test {
    display: none;
}
<form id="test" method="get" action="javascript:alert('woei!')"> 
    <input type="text" name="user" value=""> 
    <input type="password" name="pw" value="">
    <input type="submit" value="submit" id="submit"> 
</form>

Ответы

Ответ 1

Я нашел правильное решение и хотел, чтобы он делился с ребятами.

Вместо <input type="submit...> используйте <button type="submit"...>. Это будет делать то же самое в других браузерах (IE6-7, FF3) И работает в IE8.:)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style type="text/css">
#test {
    display: none;
} 
</style> 
<script type="text/javascript"> 
onload = function() { 
    document.getElementById('test').style.display = 'block'; 
};
</script> 
</head> 
<body> 
<form id="test" method="get" action="javascript:alert('woei!')"> 
    <input type="text" name="user" value="" /> 
    <input type="password" name="pw" value="" />
    <button type="submit" value="submit" id="submit"></button>
</form> 
</body> 
</html>

Ответ 3

Я думаю, что все намного сложнее, чем вы думаете...

когда значение отображения формы не имеет значения с классом css или только с атрибутом стиля на странице inital, нажатие клавиши ввода в текстовом поле не работает, только если у вас есть несколько полей ввода с типом текста... если у вас есть одно текстовое поле, оно отлично работает. Если у вас более одного, оно не срабатывает при подаче формы...

Здесь я сделал демо-версию...

Работает нормально (обычная форма) http://yasinergul.com/stackoverflow/ie8-enter-key-bug/one.html

Работает отлично (форма скрыта и отображается назад, но она с одним текстовым вводом) http://yasinergul.com/stackoverflow/ie8-enter-key-bug/two.html

Не работает (форма скрыта и отображается обратно, но с двумя текстовыми вводами) http://yasinergul.com/stackoverflow/ie8-enter-key-bug/three.html

Я думаю, что лучший подход заключается в том, чтобы дать объект .hidden для объекта, но не устанавливать отображение: none для этого селектора css. вы можете сделать это скрытым с jquery как

$(".hidden").hide();

поскольку страница загружает форму, показана для miliseconds, но скрывается после работы jquery...

Ответ 4

Я не могу сказать, если это ошибка, но я могу подтвердить, что поведение, о котором вы сообщаете, изменилось в IE 8... и я думаю, что это, вероятно, ошибка, а не преднамеренное изменение.

Если форма задана с помощью CSS-дисплея: ни одно поведение кнопки отправки по умолчанию не работает.

Другие браузеры, включая IE 7 (или даже IE 8 с использованием стандартного режима совместимости IE 7), не имеют проблем.

Я сам справился с проблемой, просто используя высоту: 0px; в CSS, после чего javascript задает соответствующую высоту, когда я хочу показать форму. Использование высоты вместо этого, поведение по умолчанию ввода ключа по умолчанию работает нормально.

Ответ 5

Старый билет, но я хотел бы добавить, что я думаю, объяснение:

IE8 выполняет следующую особенную вещь: ключ Enter отправит форму, но любой

<input type="submit" name="MySubmitButton" value="I hope I detect THIS VALUE in POST" />

не будет отправлен в POST.

IE9 изменяет поведение и отправляет значение. Chrome всегда отправил значение, насколько показали мои тесты.

Надеюсь, это поможет...

Ответ 6

Для будущих пользователей, наткнувшихся на этот вопрос:

Что работало для меня, это добавить DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ответ 7

Исправить то, что предложил @Jitendra Pancholi - теперь он представляет только форму, которую мы хотим, не все из них

$("form input").keypress(function (e) {
   if(e.which === 13) {
      $(this.form).submit();
   }
});

Ответ 8

Я попробовал его в IE8, и он работает для меня. Вы должны убедиться, что часть формы имеет фокус, хотя.

Javascript имеет функцию фокуса, которую вы можете использовать для установки фокуса, если это вам нужно.

var textbox = document.getElementById("whatever name input box id will be");
if(textbox) textbox.focus();

Ответ 9

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

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

Ответ 10

Я считаю, что Ясин имеет смысл. У меня была одна и та же проблема: несколько текстовых полей в форме, видимость которой "скрыта". Мое обходное решение (чтобы предотвратить появление формы) - установить непрозрачность формы 0 в css, а затем настроить его параметры стиля с помощью jQuery на готовом документе.

Я считаю, что это не что-то исправить с помощью JS.

Ответ 11

Да, я тоже был укушен этой ошибкой. Я нашел это обходное решение, хотя (отличие от OP):

 <script type="text/javascript"> 
 onload = function() { 
     document.getElementById('test').style.display = 'block'; 
+    document.getElementById('test').innerHTML =
+        document.getElementById('test').innerHTML;
 } 
 </script> 
 </head>

Просто заново создайте содержимое формы из самого содержимого. Хлоп. Но это работает. (Знаменитые последние слова...)

Ответ 14

Найдено рабочее решение.

Сделать кнопку отправки невидимой вместо использования дисплея: none;

input#submit {
color: transparent;
background: transparent;
border: 0px;
}