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. php中的XML DOM(11)

    7.创建节点 在dom操作中,增删改操作必须要找父节点 1.DOMElement DOMDocument::createElement ( string $name [, string $value ...

  2. 内置函数——sorted

    对List.Dict进行排序,Python提供了两个方法对给定的List L进行排序,方法1.用List的成员函数sort进行排序,在本地进行排序,不返回副本方法2.用built-in函数sorted ...

  3. Java中 IO类 - File类中的判断功能

    package com.hxzy.IOSer;import java.io.*;public class Demo05 { public static void main(String[] args) ...

  4. Nginx + uWSGI 配置django---终极版

    好开森,配置了差不多一天的项目,终于成功了,写一篇博客庆祝一下 我们先来了解下nginx与uwsgi的概念,再去配置 磨刀不误砍柴工. nginx 是一个开源的高性能的 HTTP 服务器和反向代理:1 ...

  5. iOS没你想的那么安全?

    iOS应用由于直接运行在用户的手机上,而不是运行在后台服务器上,所以更容易被攻击. 任何系统都会有木马病毒的产生,不存在绝对的安全,iOS应用由于直接运行在用户的手机上,而不是运行在后台服务器上,所以 ...

  6. sublime package control失败

    https://blog.csdn.net/jyfu2_12/article/details/86667132 安装时的错误提示如下: Error installing Package Control ...

  7. 使用X-Pack插件来进行权限控制

    1.为elasticsearch安装X-Pack插件.进入 elasticsearch根目录,执行: bin/elasticsearch-plugin install x-pack杀掉进程,重启es, ...

  8. IE下判断IE版本的语句...[if lte IE 6]……[endif](用户判断IE版本的如果小于6就显示)

    <!--[if lte IE 6]> <![endif]--> IE6及其以下版本可见   <!--[if lte IE 7]> <![endif]--> ...

  9. LOJ2476. 「2018 集训队互测 Day 3」蒜头的奖杯 & LOJ2565. 「SDOI2018」旧试题(莫比乌斯反演)

    题目链接 LOJ2476:https://loj.ac/problem/2476 LOJ2565:https://loj.ac/problem/2565 题解 参考照搬了 wxh 的博客. 为了方便, ...

  10. Pycharm 报错 AttributeError: module 'pip' has no attribute 'main'

    1.打开文件packaging_tool.py: D:\Program files\pycharm\PyCharm 2016.3.2\helpers\packaging_tool.py 2.添加导入: ...