1、当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' />
</form>

再添加一个<input type="text"/>按下回车将不会自动提交,但是页面上显示一个不知所云的输入框挺别扭,后从网上搜到两个解决办法:

  1;添加一个<input type='text' style='display:none'/>不显示输入框,然后回车之后也不会提交:

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' />
<input style='display:none' />
</form>

2;添加一个onkeydown事件,然后回车之后也不会显示:

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' onkeydown='if(event.keyCode==13) return false;'/>
</form>

如果想添加回车事件可以在onkeydown事件中添加判断提交表单:

<form id='form1' action='a1.jsp' method='post'>
<input style='display:none' />
<input type='text' name='name' onkeydown='if(event.keyCode==13){gosubmit();}' />
</form>

我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此。比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。

要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则:

如果表单里有一个type=”submit”的按钮,回车键生效。  
如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。  
如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。  
其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。  
type=”image”的input,效果等同于type=”submit”,不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。

input type =text,按回车键自动提交的更多相关文章

  1. UC浏览器input文本框输入文字回车键自动提交

    这是测试今天在jira给我提出的一个bug 下面是贴的代码 屏蔽或者禁止回车键 <!DOCTYPE html> <html> <head> <meta cha ...

  2. html设置<input type="text">内的内容自动为大写

    添加css样式:text-transform:uppercase;可以实现自动转换为大写样式. 但是input 的value还是小写的,因为它是CSS样式. <input type=" ...

  3. HTML:<input type="text"> 输入数字时的验证!(在提交时验证)

    <!--非负数:<input type="text" name="" pattern="^\d+$">--> < ...

  4. input type=password 浏览器会自动填充密码的问题

    解决办法是在form上或input上添加autoComplete="off"这个属性. form表单的属性如下所示: 但是这个解决方案在谷歌和火狐上均有bug,下面来一个一个解决. ...

  5. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  6. JavaScript通过preventDefault()使input[type=text]禁止输入但保留光标

    一.说明 取消事件的默认动作. 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任意阶段 ...

  7. 对比<input type="text" id="">和<asp:TextBox runat="server" ID="">

    首先这两个都是对应文本输入框形式: <input type="text"class="form-control"id="txt_add_pro_ ...

  8. js让text值不可改变,同<input type="text" readonly="readonly" />

    <input type="text" size="60"  name="j01" value="www.52jscn.com ...

  9. chrome下input[type=text]的placeholder不垂直居中的问题解决

    http://blog.csdn.net/do_it__/article/details/6789699 <input type="text" placeholder=&qu ...

随机推荐

  1. jquery综合练习--模态对话框传值,删除,新增表格行

    效果示例: 个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. SpringMvc-ModelAndView 结果出不来 显示路径问题 解决办法

    今天写SpringMVC的时候  写ModelAndView的时候 死活跳不过页面去-一直报错 显示路径也错误 查看导包问题 应该: import org.springframework.web.se ...

  3. [转载] 解决gns3 for mac模拟器三层交换机无法成功创建vlan的问题

    1.删除之前导入的ios: 2.选择GNS3--Edit--Preferences--IOS routers--New--导入ios-- 勾选This is an EtherSwitch router ...

  4. 算法导论-MIT笔记

    第一部分 Analysis of Algorithms 算法分析是关于计算机程序性能(performance)和资源利用的理论研究 1 What's more important than perfo ...

  5. Working with Metal—Overview

    看完这个 WWDC 之后的总结. Metal 可以在单位时间内提供 10 倍的 draw call 调用. Background About Draw Call 每一次 draw call 调用都必须 ...

  6. 考试题T3

    题意分析 这题一看没有什么思路 幸好我们机房的红太阳\(ghj1222\)切了这道题 首先我们考虑风跑一个来回之后人怎么样 就是跑了一个区间 也就是风跑了若干个来回之后 人跑了若干个区间 所以我们考虑 ...

  7. 第三方库PIL

    第三方库PIL 一.Python简介 Python是一门简洁高效.通俗易懂的高阶动态编程语言,也可以理解成是一种面向对象的解释型计算机程序设计语言. Python具有丰富和强大的库.也经常被行内人员称 ...

  8. docker 磁盘清理 相关

    用户在使用 Docker 部署业务一段时间后,可能会发现宿主节点的磁盘容量持续增长,甚至将磁盘空间耗尽进而引发宿主机异常,进而对业务造成影响. 本文先对 Docker 的空间分析与清理进行说明,然后对 ...

  9. JMeter知识点整理

  10. SCOI2019 游记

    写在前面 其实冬令营之后就有一些想说的内容,由于心情原因没有写出来.PKUWC 失误频频,唯一可能还有点价值的就是 Day2T3 计算几何推了 76 分出来.NOIWC 更是无心再谈,感觉是被提答送走 ...