脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → input按回车提交表单

如何防止INPUT按回车自动提交表单FORM

 更新时间：2016年12月06日 11:55:57   作者：beautifulsarah  
为了防止INPUT按回车form自动提交，可以以下两种方法：增加一个隐藏的input。为input增加一个按键事件来阻止form提交。具体详情可以参考下本文

form中的input只有一个，input获得焦点时按回车会form自动提交：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form action="http://blog.csdn.net/gnail_oug" method="post">
<!--input获得焦点后按回车form自动提交-->
<input type="text">
</form>
</body>
</html>

有多个input时(不管是否是隐藏的)，任意一个input获得焦点都不会提交。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form action="http://blog.csdn.net/gnail_oug" method="post">
<!--下面两个input获得焦点后按回车form都不会自动提交-->
<input type="text">
<input type="text">
</form>
</body>
</html>

或

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form action="http://blog.csdn.net/gnail_oug" method="post">
<!--下面这个input获得焦点后按回车form不会自动提交-->
<input type="text">
<!-- 这里是通过样式隐藏，不等于<input type="hidden"> ,使用type="hidden"同样会提交 -->
<input type="text" style="display: none;">
</form>
</body>
</html>

单个input时，通过事件阻止form提交：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form action="http://blog.csdn.net/gnail_oug" method="post">
<!--下面两个input获得焦点后按回车form不会自动提交-->
<input type="text" onkeydown="if(event.keyCode==13)return false;">
</form>
</body>
</html>

所以，为了防止INPUT按回车form自动提交，可以以下两种方法：

增加一个隐藏的input。

为input增加一个按键事件来阻止form提交。

以上所述是小编给大家介绍的防止INPUT按回车自动提交表单FORM的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 微信小程序用户授权、位置授权及获取微信绑定手机号

    微信小程序用户授权、位置授权及获取微信绑定手机号

    这篇文章主要介绍了信小程序用户授权、位置授权及获取微信绑定手机号,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JavaScript实现复制内容到粘贴板代码

    JavaScript实现复制内容到粘贴板代码

    最近做了一个前端项目，其中有需求：通过button直接把input或者textarea里的值复制到粘贴板里。下面小编给大家分享JavaScript实现复制内容到粘贴板代码，需要的朋友参考下
    2016-03-03
  • 利用JavaScript对中文（汉字）进行排序实例详解

    利用JavaScript对中文（汉字）进行排序实例详解

    排序是我们在日常开发中经常遇到的一个功能，下面这篇文章主要给大家介绍了利用JavaScript对中文（汉字）进行排序的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来看看吧。
    2017-06-06
  • JS实现拖动滑块验证

    JS实现拖动滑块验证

    这篇文章主要为大家详细介绍了JS实现拖动滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • PHP读取远程txt文档到数组并实现遍历

    PHP读取远程txt文档到数组并实现遍历

    这篇文章主要介绍了PHP读取远程txt文档到数组并实现遍历,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • js和jquery使按钮失效为不可用状态的方法

    js和jquery使按钮失效为不可用状态的方法

    js和jquery如何使按钮失效，很简单，只要设置disabled属性为true即为不可用状态即可，下面有个简单的示例，大家可以参考下
    2014-01-01
  • JS获取本地地址及天气的方法实例小结

    JS获取本地地址及天气的方法实例小结

    这篇文章主要介绍了JS获取本地地址及天气的方法,结合实例形式总结分析了javascript通过浏览器、第三方API实现获取本地地址与天气的相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • 详解JS中的柯里化(currying)

    详解JS中的柯里化(currying)

    这篇文章主要介绍了JS中的柯里化(currying),需要的朋友可以参考下
    2017-08-08
  • 浅析javascript中的Event事件

    浅析javascript中的Event事件

    本文主要对javascript中的（Event）事件进行介绍，文章篇尾举了几个案例：方块随着鼠标移动；输入框文字提示；仿select控件；留言本；自定义右键菜单；键盘控制div运动。需要的朋友可以看下
    2016-12-12
  • 微信小程序实现播放音频功能

    微信小程序实现播放音频功能

    这篇文章主要为大家详细介绍了微信小程序实现播放音频功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论