IE form 隐藏后不能提交

表单提交与输入框陷阱：探究Enter键与表单提交的奥秘

最新推荐文章于 2022-03-30 12:53:53 发布

原创最新推荐文章于 2022-03-30 12:53:53 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

161 篇文章

订阅专栏

本文深入探讨了表单提交机制，特别是如何利用Enter键触发表单提交的问题。分析了两种常见的表单布局情况：一种是单纯使用输入框，另一种是在表单中包含submit按钮。通过对比分析，揭示了在某些情况下，即使直接按下Enter键，表单仍无法提交的原因。此外，文章还提到了在美化radio/checkbox时，隐藏元素可能导致的浏览器兼容性问题。

form表单的提交，实现方法一般有：

1、input type="submit"

2、输入框然后直接“Enter"

3、脚本form.submit()

.......

很多情况下我们习惯输入信息后直接“Enter"，操作方便，不用再去拿鼠标点来点去。

这个时候，有些问题就来了，“Enetr"后，表单没有提交:

一、单纯输入框：

这是可以提交的表单：

<form action="" method="post" name="">
          <label for="A">用户名</label><input type="text" id="A" name="" />
</form>

这是提交不了的表单：

<form action="" method="post" name="">
          <label for="A">用户名</label><input type="text" id="A" name="a" />
           <label for="B">用户名</label><input type="text" id="B" name="b" />
</form>

这两个并唯一的却别就是多了一个输入框，就因为这样，所以表单不能提交，IE、FF、chrome都是如此（至于原因，暂不知，等查到在续）

二、input type="submit"

这是可以提交的表单：

<form action="www.163.com" method="post" name="">
    <label for="A">用户名</label><input type="text" id="A" name="a" />
    <label for="B">用户名</label><input type="text" id="B" name="b" />
    <input type="submit" />
</form>

但是如果<input type="submit" />的display:none;visibility:hidden的话，在不同浏览器就会出现不同的状况，IE\chrome一样不能提交，ff可以提交。

这可能是浏览器特有的机制，类似的情况还有：我们在美化radio checkbox的时候，一般都会将其隐藏，然后通过美化label，并由label for属性来实现l在实现选中，但是在ＩＥ就会无效