web-dev-qa-db-ja.com

IE8では、フォームにキーを入力しても機能しません

IE8では、フォームを送信するためにEnterキーが機能しないという問題があります。この問題を明らかにするためにテストページを生成しました。 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>
formsinternet-explorer-8enter
23
Andre

私は適切な解決策を見つけて、それをあなたたちと共有したかったのです。

<input type="submit...>を使用する代わりに、<button type="submit"...>を使用します。これは他のブラウザ（IE6-7、FF3）でもまったく同じように動作します[〜＃〜] and [〜＃〜] 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>
13
Andre
$("form input").keypress(function (e) {
   if(e.which === 13) {
      $("form").submit();
   }
});

上記は適切な修正です。参照： IEエンターキーを押してもフォームを送信しませんか？

9
Jitendra Pancholi

私はすべてがあなたが思っているよりもはるかに複雑だと思います...

フォームの表示値がcssクラスまたはページ初期のstyle属性のみでnoneに設定されている場合、テキストフィールドにEnterキーを押しても、テキストタイプの入力フィールドが複数ある場合にのみ機能しません... if 1つのテキストフィールドがあり、正常に機能します。複数ある場合、フォーム送信は実行されません。

ここで私はデモを作りました...

正常に動作します（通常の形式） http://yasinergul.com/stackoverflow/ie8-enter-key-bug/one.html

正常に動作します（フォームは非表示でセットバックは表示されますが、テキスト入力は1つです） http://yasinergul.com/stackoverflow/ie8-enter-key-bug/two.html

動作しません（フォームが非表示になり、表示されますが、2つのテキスト入力があります） http://yasinergul.com/stackoverflow/ie8-enter-key-bug/three.html

最善のアプローチは、オブジェクトに.hiddenクラスを与えることですが、このcssセレクターにdisplay：noneを設定しないことです。あなたはそれをjqueryで隠すことができます

$（ "。hidden"）。hide（）;

ページが読み込まれると、フォームはミリ秒単位で表示されますが、jqueryが機能すると非表示になります...

6
Yasin Ergul

正確にバグかどうかはわかりませんが、報告された動作がIE 8 ...で変更されたことは確認できます。おそらくバグであり、意図的なものではないと思います。変化する。

フォームがCSSdisplay：noneで設定されている場合、デフォルトの送信ボタンの動作は機能しません。

IE 7（またはIE 8 using IE 7標準互換モード））を含む他のブラウザーには問題はありません。

私はheight：0pxを使用するだけで、この問題を自分で回避しました。 CSSで、フォームを表示するときにjavascriptで適切な高さを設定します。代わりに高さを使用すると、デフォルトのEnterキー送信動作は正常に機能しているようです。

4
Stephen M. Redd

古いチケットですが、説明と思われるものを追加したいと思います。

IE8は、次のような特殊な処理を実行します。Enterキーを押すとフォームが送信されますが、

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

pOSTでは送信されません。

IE9は動作を変更し、値を送信します。 Chromeは、私のテストが示している限り、常に値を送信しています。

これがお役に立てば幸いです...

1
G. Stoynev

@Jitendra Pancholiが提案した内容の修正-すべてではなく、必要なフォームのみを送信するようになりました

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

この質問に出くわした将来のユーザーのために：

私にとってうまくいったのは、DOCTYPEを追加することでした。

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

1
etm124

実用的な解決策を見つけました。

Display：noneを使用する代わりに、送信ボタンを非表示にします。

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

私はIE8でそれを試しました、そしてそれは私のために働きます。ただし、フォームの一部にフォーカスがあることを確認する必要があります。

Javascriptには、必要に応じてフォーカスを設定するために使用できるフォーカス関数があります。

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

入力ボックスにonkeyupイベントを追加して、入力ボックスでEnterキーを押すと、それも送信されるようにすることができます。

CodePartizanが述べたように、それ以外の場合はボタンにフォーカスする必要があるため、ボタンにタブで移動するか、ボタンをクリックすると、私にとっても機能するようです。

0
James Black

私はieで同じ問題を抱えていましたが、これを読むまで解決策は役に立ちませんでした：

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

私のフォームには入力フィールドが1つしかありませんでした。 :)

0
Carlos

これはIE8で私のために働きます。入力フィールドを1つだけ使用すると、この問題が発生しました。

続きを読む： http://www.rachaelarnold.com/dev/archive/enter-key-form-submission-bug#ixzz2Y5Zwgj2k

0
Erik

ええ、今日もこのバグに噛まれました。ただし、この回避策は見つかりました（OPとは異なります）。

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

フォームの内容をそれ自体の内容から再作成するだけです。うわぁ。しかし、それは機能します。 （有名な最後の言葉...）

0
Peter V. Mørch

Yasinがポイントだと思います。同じ問題が発生しました。表示が「非表示」になっているフォーム内の複数のテキストフィールドです。私の回避策（フォームが点滅しないようにするため）は、cssでフォームの不透明度を0に設定し、ドキュメントの準備ができたときにjQueryを使用してスタイル設定をカスタマイズすることです。

これはJSで修正するものではないと思います。

0
user283539