• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 网页中表单按回车就自动提交的问题总结

网页中表单按回车就自动提交的问题总结

作者:默默前行,勿喜、勿悲、一切随缘! 字体:[增加 减小] 来源:互联网 时间:2017-10-30

本文主要包含html,表单,回车响应等相关知识,默默前行,勿喜、勿悲、一切随缘!希望在学习及工作中可以帮助到您

当form表单中只有一个输入框时,焦点在此输入框中,按回车键将自动将表单提交。

 

<form action="http://www.baidu.com">
       <input type="text">
</form>

即使不写action,页面也会自动刷新,有时这并不是我们需要的。

 

如果再次添加一个input框,会怎样?

 

<form action="http://www.baidu.com">
       <input type="text"><br>
       <input type="text">
</form>

焦点在输入框中,按回车键没有提交表单。

 

如果表单中添加一个submit类型的按钮呢,会怎样?

 

 <form action="http://www.baidu.com">
        <input type="text"><br>
        <input type="text"><br>
        <input type="submit" value="提交">
    </form>

焦点在输入框中,按回车表单竟然自动提交了。

如果表单中增加一个button类型的按钮,会怎样?

 

<form action="http://www.baidu.com">
        <input type="text"><br>
        <input type="text"><br>
        <input type="button" value="提交">
    </form>

焦点在输入框中,按回车键没有提交表单。

 

上面表述的现象,其实是浏览器帮我们做了处理,这里总结一下:

1、如果表单中有一个type=“submit”的按钮,不管输入框有几个,回车键生效。

2、如果表单中只有一个type=“text”的input,不管按钮是什么type,回车键生效。

3、如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。

4、其它表单元素如textarea、select、radio、chekbox不影响上述触发规则,但这些元素本身在FX下会响应回车键,在IE下不响应。

在这说一下,怎样解决单输入框按回车自动提交的问题。

1)隐藏一个输入框

 

<form action="http://www.baidu.com">
        <input type="text"><br>
        <input type="text" style="display: none;">
    </form>

2)添加一个onkeydown事件,禁用回车响应

 

 

 <form action="http://www.baidu.com">
        <input type="text" onkeydown="if(event.keyCode==13) return false;"/>
    </form>

 

您可能想查找下面的文章:

  • HTML表单提交的几种方式_动力节点Java学院整理
  • HTML表单_动力节点Java学院整理
  • HTML大于号、小于号、空格、引号等常用的转义代码写法一览表
  • HTML中实现鼠标经停时整行(tr)变色
  • html格式化json的实例代码
  • html在消息按钮上增加数量角标的实现代码
  • html页面跳转传递参数问题
  • html、css和js注释规范用法小结
  • Html 实现动态显示颜色块的报表效果(实例代码)
  • html是什么文件 html文件如何打开

相关文章

  • 2017-08-05浅谈HTML的语义化和一些简单优化
  • 2017-09-08html文本框点击后自带蓝色边框解决办法
  • 2017-08-05HTML Frameset 例子代码
  • 2017-08-05HTML head 头标签详细介绍
  • 2017-08-05HTML与XHTML、以及HTML4与HTML5标签之间的区别简介
  • 2017-08-05HTML非常用标签 optgroup、sub、sup和bdo示例代码
  • 2017-08-05HTML 链接锚标签及其在SEO中的作用介绍
  • 2017-08-05HTML设计模式日常学习笔记整理
  • 2017-08-05网页常用代码 比较基础的东西
  • 2017-08-05HTML元素(标签)大全及使用介绍

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 添加和删除HTML节点的简单示例
    • 如何减少网页的内存使用与CPU占用
    • 表单Form元素的一些简单实现代码以注册为例
    • 网页设计制作之改进超级链接效果
    • HTML (css样式规范)必看篇
    • Html 实现动态显示颜色块的报表效果(实例代码)
    • 如何去除表单的回车即提交即回车!=提交
    • Button的四种Click响应方法汇总
    • meta标签中的viewport控制设备屏幕css
    • 按钮在IE中两边被拉伸的 BUG

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有