In IE8 enter key in a form does not work

2019-01-25 02:41发布

站内问答 / 前沿技术
1297 14 4

I have a problem that in IE8 the enter does not work to submit a form. I have generated a test page to expose this problem. It seems that displaying the form in the onLoad function disables results that the enter button does not trigger a submit anymore. Is this a bug in IE8 or is it some security issue?

The code to reproduce this is:

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条回答
够拽才男人
2楼-- · 2019-01-25 03:21

I have found a proper solution and wanted it to share with u guys.

Instead of using <input type="submit...>, use <button type="submit"...>. This will do exactly the same in the other browsers (IE6-7, FF3) AND works in 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>
查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
3楼-- · 2019-01-25 03:21

For any future users stumbling upon this question:

What worked for me was adding a DOCTYPE:

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

查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
4楼-- · 2019-01-25 03:22

I can't say if it is a bug exactly, but I can confirm that the behavior you report has changed in IE 8... and I imagine it is probably a bug, not an deliberate change.

If the form is set with CSS display:none the default submit button behavior doesn't work.

Other browsers, including IE 7 (or even IE 8 using IE 7 standard compatibility mode) do not have problems.

I've worked around the problem myself by just using height:0px; in the CSS, then having javascript set the appropriate height when I want to show the form. Using height instead, the default enter key submit behavior seems to work normally.

查看更多
0人赞 添加讨论(0) 举报
ゆ 、 Hurt°
5楼-- · 2019-01-25 03:24

I tried it in IE8 and it works for me. You have to make sure that part of the form has focus though.

Javascript has a focus function that you can use to set the focus if that's what you need.

var textbox = document.getElementById("whatever name input box's id will be");
if(textbox) textbox.focus();
查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
6楼-- · 2019-01-25 03:24

Yeah, I was bitten by this bug too today. I found this workaround, though (diff from the OP):

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

Simply recreate the contents of the form from the contents of itself. Yikes. But it works. (Famous last words...)

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
7楼-- · 2019-01-25 03:25 
$("form input").keypress(function (e) {
   if(e.which === 13) {
      $("form").submit();
   }
});

Above is a proper fix. Ref: IE Not submitting my form on enter press of enter key?

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)