В IE8 ввод ключа в форме не работает - PullRequest
Новая
       40

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

23 голосов
/ 15 сентября 2009

У меня проблема в том, что в 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>

Ответы [ 14 ]

13 голосов
/ 16 сентября 2009

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

Вместо <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>
9 голосов
/ 15 февраля 2013 
$("form input").keypress(function (e) {
   if(e.which === 13) {
      $("form").submit();
   }
});

Выше это правильное решение. Ссылка: IE Не отправляете мою форму при вводе, нажмите клавишу ввода?

6 голосов
/ 23 февраля 2010

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

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

Здесь я сделал демо ...

Работает отлично (нормальная форма) 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

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

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

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

4 голосов
/ 15 сентября 2009

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

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

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

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

1 голос
/ 09 января 2015

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

$("form input").keypress(function (e) {
   if(e.which === 13) {
      $(this.form).submit();
   }
});
1 голос
/ 06 ноября 2013

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

Для меня сработало добавление DOCTYPE:

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

1 голос
/ 24 сентября 2012

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

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

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

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

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

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

0 голосов
/ 02 февраля 2015

Нашел рабочий раствор.

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

input#submit {
color: transparent;
background: transparent;
border: 0px;
}
0 голосов
/ 27 августа 2014

У меня была такая же проблема с ie, и ни одно из решений не помогло, пока я не прочитал это:

http://www.rachaelarnold.com/dev/archive/enter-key-form-submission-bug#ixzz2Y5Zwgj2k

у моей формы было только одно поле ввода .... :)

0 голосов
/ 04 июля 2013

Это работает для меня в IE8. У меня была эта проблема при использовании только одного поля ввода.

Подробнее: http://www.rachaelarnold.com/dev/archive/enter-key-form-submission-bug#ixzz2Y5Zwgj2k

Страница:
...