迷失button 和 input button

最新推荐文章于 2024-07-06 10:55:51 发布

weiweismile123

最新推荐文章于 2024-07-06 10:55:51 发布

阅读量499

点赞数

分类专栏： html5 button input

本文链接：https://blog.csdn.net/weiweismile123/article/details/69263693

版权

html5 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

button

1 篇文章 0 订阅

订阅专栏

input

1 篇文章 0 订阅

订阅专栏

最近在写一个登录页面时，遇到了一个问题，关于表单提交的。

初始代码：

<form id="myForm" action="/i/eg_smile.gif" method="get">
名：<input type="text" name="firstname" size="20"><br />
姓：<input type="text" name="lastname" size="20"><br />
<br />
<button onclick="formSubmit()">登录</button>
</form>
<script type="text/javascript">
function formSubmit()
{
document.getElementById("myForm").submit()
}
</script>

页面展示效果：
html

之后不管我是聚焦到“名”还是“姓”这两个输入框，在按下enter键之后，都会导致表单提交，但是这一切与我们的设计逻辑一点都不符合。我们希望在“名”中输入信息之后，按下enter键直接到“姓”这个输入框，然后再enter之后对整个表单进行检查，看是不是符合规范。如果符合规范则提交反之不提交。

同时，还发现去掉button的js代码，任然可以提交form表单。

于是乎，对button和它的表亲input button进行了一番学习，并做了一系列的实验。发现按回车键自动提交表单的情况有很多种，下面我们一一道来：

1、首先，我翻阅了W3C上面对button和input button的描述：
（1）Button 对象代表一个按钮。
在 HTML 文档中 <button> 标签每出现一次，Button 对象就会被创建。
在 HTML button 元素中你可以添加内容，如文本或者图片，这是与input 按钮（button）类型的不同之处。
（2）<input type="button" value="点我" onclick="msg()">定义可点击的按钮，在用户单击按钮时启动一段 JavaScript（如定义的onclick事件代码）
（3）生成按钮的几种方法（摘抄至知乎）：
<input type="button" /> 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。(不会提交表单，同时在同一form中的input text，再点击enter之后是不会按顺序换到下一个input中的)
<input type="submit" /> 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。（同时在同一form中的input text，再点击enter之后会按顺序换到下一个input中的）
<button> 这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多媒体内容。（当然，前两个用图片背景也可以做到）。它的缺点是不同的浏览器得到的 value 值不同；可能还有其他的浏览器兼容问题。
其他标签，例如 a, img, span, div，然后用图片把它伪装成一个按钮。

2、出现自动提交的几种情况（摘抄该文章）：
（1）是编写了JavaScript代码，当用户点按Enter键时，通过js事件侦听机制触发表单的提交

<pre class="html" name="code">   $(document).keyup(function(event){  
  if(event.keyCode ==13){  
    $("#submit").trigger("click");  
  }  
});

（2）浏览器的默认行为：

<body>  
    <h1>本demo演示在文本框中按enter键是否触发提交表单</h1>  
    <h2>当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交。</h2>
    <form id='form1' action='a1.jsp' method='post'>
       <input type='text' name='name' />
    </form>
    <h2>默认情况下，一个文本框的时候，提交，不管按钮type是submit还是button</h2>  
    <form action="http://www.csdn.net">  
        <input type="text">  
        <input type="button" value="提交">  
    </form>  
    <h2>一个文本框的时候怎么才能做到不提交，方法是加一个隐藏掉的文本框</h2>  
    <form action="http://www.csdn.net">  
        <input type="text">  
        <input type="text" style="display:none">  
        <input type="button" value="提交">  
    </form>  
   <h2> 添加一个onkeydown事件，然后回车之后也不会显示：</h2>
    <form id='form1' action='a1.jsp' method='post'>
        <input type='text' name='name' onkeydown='if(event.keyCode==13) return false;'/>
    </form>
  <h2>如果想添加回车事件可以在onkeydown事件中添加判断提交表单：</h2>
    <form id='form1' action='a1.jsp' method='post'>
        <input style='display:none' />
        <input type='text' name='name' onkeydown='if(event.keyCode==13){gosubmit();}' />
    </form>
    <h2>只要有type为submit的按钮存在，一个文本框还是多个文本框都提交</h2>  
    <form action="http://www.csdn.net">  
        <input type="text">  
        <input type="submit" value="提交">  
    </form>  
    <h2>只要有type为submit的按钮存在，一个文本框还是多个文本框都提交</h2>  
    <form action="http://www.csdn.net">  
        <input type="text">  
        <input type="text">  
        <input type="submit" value="提交">  
    </form>  
    <h2>多个文本框的时候，不提交，用type为button的按钮就行啦</h2>  
    <form action="http://www.csdn.net">  
        <input type="text">  
        <input type="text">  
        <input type="button" value="提交">  
    </form>  
    <h2>用button元素时，FX和IE下有不同的表现</h2>  
    <form action="http://www.csdn.net">  
        <input type="text">  
        <input type="text">  
        <button>提交</button>  
    </form>  
    <h2>radio和checkbox在FX下也会触发提交表单，在IE下不会</h2>  
    <form action="http://www.csdn.net">  
        <input type="text">  
        <input type="radio" name="a">  
        <input type="checkbox" name="b">  
        <input type="checkbox" name="c">  
        <input type="button" value="提交">  
    </form>  
    <h2>type为image的按钮，等同于type为submit的效果</h2>  
    <form action="http://www.csdn.net">  
        <input type="text">  
        <input type="text">  
        <input type="image" src="/images/logo.gif">  
    </form>  
</body>

对于这些浏览器默认的行为，一般采取两种方式：
（1）使用onkeydown事件来禁止enter键提交：

<form name="form" action="" method="post" onkeydown="if(event.keyCode==13)return false;" onSubmit="return checkSubmit();">

（2）可以在form中增加一个隐藏的输入框 display：none；：

<span class="tag"></span>
<span class="tag-name">input</span><span> </span>
<span class="attribute">type</span>
<span>=</span>
<span class="attribute-value">"text"</span>
<span> </span>
<span class="attribute">name</span>
<span>=</span>
<span class="attribute-value">"notautosubmit"</span>
<span>  </span>
<span class="attribute">style</span>
<span>=</span>
<span class="attribute-value">"display:none"</span>
<span class="tag">/></span>

总结：

如果表单input里有一个type=”submit”的按钮，回车键生效。
如果表单input里**只有一个**type=”text”的input，不管按钮是什么type，回车键生效。
如果是按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。 button的type 为submit时，表现形式也类似于input的submit
其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。
如果想要阻止submit的提交，可以使用js代码，阻止它的默认行为，preventDefault或者returnValue

weiweismile123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
迷失button 和 input button

最近在写一个登录页面时，遇到了一个问题，关于表单提交的。初始代码：form id="myForm" action="/i/eg_smile.gif" method="get">名：input type="text" name="firstname" size="20">br />姓：input type="text" name="lastname" size="20">br />br
复制链接

扫一扫

专栏目录