通过按Enter阻止用户提交表单
我在网站上进行了一项调查,用户单击Enter键(我不知道为什么),然后不按提交按钮就意外提交了调查(表单),似乎存在一些问题。 有办法防止这种情况吗?
我在调查中使用的是HTML,PHP 5.2.9和jQuery。
#1楼
给表单一个动作'javascript:void(0);' 似乎可以解决问题
<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {$(window).keydown(function(event){if(event.keyCode == 13) {alert('Hello');}});
});
</script>
#2楼
我有一个类似的问题,我有一个带有“ ajax文本字段”(Yii CGridView)的网格,并且只有一个提交按钮。 每次我在文本字段中进行搜索,然后点击输入提交的表单。 我必须对按钮做一些事情,因为它是视图之间的唯一通用按钮(MVC模式)。 我要做的就是删除type="submit"
并放入onclick="document.forms[0].submit()
#3楼
在我的特定情况下,我必须停止ENTER提交表单,还必须模拟单击Submit按钮。 这是因为提交按钮上具有单击处理程序,因为我们在模式窗口中(继承的旧代码)。 无论如何,这是我针对这种情况的组合解决方案。
$('input,select').keypress(function(event) {// detect ENTER keyif (event.keyCode == 13) {// simulate submit button click$("#btn-submit").click();// stop form from submitting via ENTER key pressevent.preventDefault ? event.preventDefault() : event.returnValue = false;}});
该用例对使用IE8的人员特别有用。
#4楼
采用:
// Validate your form using the jQuery onsubmit function... It'll really work...$(document).ready(function(){$(#form).submit(e){e.preventDefault();if(validation())document.form1.submit();});
});function validation()
{// Your form checking goes here.
}<form id='form1' method='POST' action=''>// Your form data
</form>
#5楼
这对我有用
jQuery.each($("#your_form_id").find('input'), function(){$(this).bind('keypress keydown keyup', function(e){if(e.keyCode == 13) { e.preventDefault(); }});
});
#6楼
如果使用脚本执行实际的提交,则可以向onsubmit处理程序添加“ return false”行,如下所示:
<form onsubmit="return false;">
从JavaScript调用表单上的commit()不会触发该事件。
#7楼
我认为所有答案都已涵盖其中,但是如果您使用带有一些JavaScript验证代码的按钮,则只需将表单的onkeypress设置为Enter即可按预期方式调用您的提交:
<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">
onkeypress JS可能是您需要执行的任何操作。 无需进行更大的全球变革。 如果您不是一个从头开始编写应用程序的人,而您已经被投入修复其他人的网站而无需拆开并重新测试它,则尤其如此。
#8楼
我想添加一些CoffeeScript代码(未经现场测试):
$ ->$(window).bind 'keypress', (event) ->if event.keyCode == 13unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]event.preventDefault()
(我希望您喜欢“ except”子句中的技巧。)
#9楼
我只需要阻止特定的输入提交,因此我使用了一个类选择器,以便在需要的地方都将其作为“全局”功能。
<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />
和这个jQuery代码:
$('.idNoEnter').keydown(function (e) {if (e.keyCode == 13) {e.preventDefault();}
});
或者,如果击键不足:
$('.idNoEnter').on('keypress keydown keyup', function (e) {if (e.keyCode == 13) {e.preventDefault();}
});
一些注意事项:
这里修改各种很好的答案, 回车键似乎工作keydown
上所有的浏览器。 作为替代,我将bind()
更新为on()
方法。
我是类选择器的忠实拥护者,权衡了所有优缺点和性能讨论。 我的命名约定是'idSomething',以指示jQuery将其用作ID,以将其与CSS样式分开。
#10楼
在对其他解决方案感到沮丧之后,这对所有浏览器都有效。 我也建议您使用name_space外部函数来避免声明全局变量。
$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);this.stifle = function(event) {event.cancelBubble;event.returnValue = false;if(this.is_ie === false) {event.preventDefault();}return false;}this.on_enter = function(func) {function catch_key(e) {var enter = 13;if(!e) {var e = event;}keynum = GetKeyNum(e);if (keynum === enter) {if(func !== undefined && func !== null) {func();}return name_space.stifle(e);}return true; // submit}if (window.Event) {window.captureEvents(Event.KEYDOWN);window.onkeydown = catch_key;}else {document.onkeydown = catch_key;}if(name_space.is_ie === false) {document.onkeypress = catch_key; }}
}
样品使用:
$(function() {name_space.on_enter(function () {alert('hola!');});
});
#11楼
禁止在任何地方输入密钥
如果您的表单中没有<textarea>
,则只需将以下内容添加到您的<form>
:
<form ... onkeydown="return event.key != 'Enter';">
或使用jQuery:
$(document).on("keydown", "form", function(event) { return event.key != "Enter";
});
这将导致表单内的每个按键将在被检查key
。 如果不是Enter
,那么它将返回true
并且一切照常进行。 如果它是Enter
,那么它将返回false
并且任何内容都会立即停止,因此不会提交该表单。
keydown
事件优先于keyup
事件,因为keyup
时间太晚,无法阻止表单提交。 从历史上讲,也有keypress
,但不推荐使用,如KeyboardEvent.keyCode
。 您应该改用KeyboardEvent.key
,它返回被按下的键的名称。 选中Enter
,这将同时检查13(普通输入)和108(小键盘输入)。
请注意,在某些其他答案中建议的$(window)
代替$(document)
对于IE <= 8中的keydown
/ keyup
无效,因此,如果您也想覆盖那些可怜的用户,那不是一个好选择。
仅在文本区域上允许输入键
如果您的表单中有一个<textarea>
(当然应该接受Enter键),则将keydown处理程序添加到不是<textarea>
每个单独的输入元素中。
<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...
为了减少样板,最好使用jQuery:
$(document).on("keydown", ":input:not(textarea)", function(event) {return event.key != "Enter";
});
如果您在这些输入元素上附加了其他事件处理程序函数,并且由于某些原因也希望在enter键上调用这些事件处理函数,则仅阻止事件的默认行为,而不返回false,以便可以正确传播到其他处理程序。
$(document).on("keydown", ":input:not(textarea)", function(event) {if (event.key == "Enter") {event.preventDefault();}
});
允许在文本区域上输入回车键,仅提交按钮
如果您也想允许在提交按钮<input|button type="submit">
上输入Enter键,那么您始终可以按如下所示优化选择器。
$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {// ...
});
请注意,其他一些答案中建议的input[type=text]
并不涵盖那些HTML5非文本输入,因此这不是一个好的选择器。
#12楼
采用:
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {if(e.keyCode == 13) {e.preventDefault();return false;}
});
该解决方案适用于网站上的所有表单(也适用于Ajax插入的表单),从而仅防止在输入文本中使用Enter 。 将其放在文档准备就绪功能中,并终身忘记此问题。
#13楼
我目前无法发表评论,因此我将发布一个新答案
接受的答案还可以,但是并没有停止在numpad enter上提交。 至少在当前版本的Chrome中。 我不得不对此更改键码条件,然后它可以工作。
if(event.keyCode == 13 || event.keyCode == 169) {...}
#14楼
就我而言,我有一个表单中的几个jQuery UI自动完成字段和textareas,所以我绝对希望它们接受Enter 。 因此,我从表单中删除了type="submit"
输入,并添加了一个锚定<a href="" id="btn">Ok</a>
。 然后,将其样式设置为按钮,并添加以下代码:
$( '#btn' ).click( function( event ){event.preventDefault();if ( validateData() ){$( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );}return false;
});
如果用户填写了所有必填字段,则validateData()
成功并提交表单。
#15楼
我在这里看不到的答案:当您在页面上的各个元素之间切换时,在进入“提交”按钮时按Enter将触发表单上的onsubmit处理程序,但会将事件记录为MouseEvent。 这是我涵盖大多数基地的简短解决方案:
这不是与jQuery相关的答案
的HTML
<form onsubmit="return false;" method=post><input type="text" /><br /><input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" /><input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>
的JavaScript
window.submitMouseOnly=function(evt){let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}
查找工作示例: https : //jsfiddle.net/nemesarial/6rhogva2/
#16楼
完全不同的方法:
- 按下Enter键将激活表格中的第一个
<button type="submit">
。 - 即使使用
style="display:none;
隐藏该按钮,也是如此style="display:none;
- 该按钮的脚本可以返回
false
,这将中止提交过程。 - 您仍然可以使用另一个
<button type=submit>
提交表单。 只需返回true
即可级联提交。 - 聚焦真实提交按钮时按Enter键将激活真实提交按钮。
- 在
<textarea>
或其他表单控件中按Enter键将表现正常。 - 在
<input>
表单控件中按Enter将触发第一个<button type=submit>
,它返回false
,因此什么也没有发生。
从而:
<form action="..."><!-- insert this next line immediately after the <form> opening tag --><button type=submit onclick="return false;" style="display:none;"></button><!-- everything else follows as normal --><!-- ... --><button type=submit>Submit</button>
</form>
#17楼
这是达到目标的解决方案,既干净又有效。
$('form').submit(function () {if ($(document.activeElement).attr('type') == 'submit')return true;else return false;
});
#18楼
不放置提交按钮可以。 只需将脚本放入输入(类型=按钮),或添加eventListener(如果您希望它在表单中提交数据)。
宁可使用这个
<input type="button">
比使用这个
<input type="submit">
#19楼
- 不要将type =“ submit”用于输入或按钮。
- 使用type =“ button”并使用js [Jquery / angular / etc]将表单提交到服务器。
#20楼
只能提交,但不能输入其他重要的回车键功能,例如在<textarea>
创建新段落:
window.addEventListener('keydown', function(event) { //set default value for variable that will hold the status of keypress pressedEnter = false; //if user pressed enter, set the variable to true if (event.keyCode == 13) pressedEnter = true; //we want forms to disable submit for a tenth of a second only setTimeout(function() { pressedEnter = false; }, 100) }) //find all forms var forms = document.getElementsByTagName('form') //loop through forms for (i = 0; i < forms.length; i++) { //listen to submit event forms[i].addEventListener('submit', function(e) { //if user just pressed enter, stop the submit event if (pressedEnter == true) { updateLog('Form prevented from submit.') e.preventDefault(); return false; } updateLog('Form submitted.') }) } var log = document.getElementById('log') updateLog = function(msg) { log.innerText = msg }
input, textarea { display: inline-block; margin-bottom: 1em; border: 1px solid #6f6f6f; padding: 5px; border-radius: 2px; width: 90%; font-size: 14px; } input[type=submit] { background: lightblue; color: #fff; }
<form> <p>Sample textarea (try enter key):</p> <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/> <p>Sample textfield (try enter key):</p> <input type="text" placeholder="" /> <br/> <input type="submit" value="Save" /> <h3 id="log"></h3> </form>
#21楼
W3C HTML5规范的第4.10.22.2节隐式提交说:
form
元素的默认按钮是树形顺序中的第一个提交按钮 ,其表单所有者是该form
元素。如果用户代理支持让用户隐式提交表单(例如,在某些平台上,当文本字段被隐式聚焦时,按下“ enter”键则提交表单),则对默认按钮具有定义的激活的表单执行此操作行为必须导致用户代理在该默认按钮上运行综合点击激活步骤 。
注意:因此,如果禁用了默认按钮 ,则使用这种隐式提交机制时不会提交表单。 (禁用时,按钮没有激活行为 。)
因此,禁用任何隐式提交表单的符合标准的方法是将禁用的提交按钮放置为表单中的第一个提交按钮:
<form action="..."><!-- Prevent implicit submission of the form --><button type="submit" disabled style="display: none" aria-hidden="true"></button><!-- ... --><button type="submit">Submit</button>
</form>
这种方法的一个不错的功能是,它无需JavaScript就可以工作; 无论是否启用JavaScript,都需要使用符合标准的Web浏览器以防止隐式表单提交。
#22楼
这里已经有很多好的答案,我只是想从UX的角度做出一些贡献。 表单中的键盘控件非常重要。
问题是如何禁止按Enter
提交。 不是如何忽略整个应用程序中的Enter
。 因此,请考虑将处理程序附加到表单元素,而不是窗口。
禁用Enter
提交表单仍应允许以下操作:
- 当“提交”按钮为焦点时,通过
Enter
提交表单。 - 填写所有字段后的表单提交。
- 通过
Enter
与未提交按钮进行交互。
这只是样板,但它符合所有三个条件。
$('form').on('keypress', function(e) { // Register keypress on buttons. $attr = $(e.target).attr('type); if ($attr === 'button' || $attr === 'submit') { return true; } // Ignore keypress if all fields are not populated. if (e.which === 13 && !fieldsArePopulated(this)) { return false; } });
#23楼
使用Javascript (无需检查任何输入字段):
<script>
window.addEventListener('keydown', function(e) {if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {e.preventDefault();return false;}
}, true);
</script>
如果有人想将其应用于特定字段,例如输入类型文本:
<script>
window.addEventListener('keydown', function(e) {if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {e.preventDefault();return false;}}
}, true);
</script>
就我而言,这很好。
#24楼
进入您的css并添加它,然后只要您不再提交输入,只要您已经提交输入,它就会自动阻止您提交配方器,您可以删除它或键入activate
和deactivate
input:disabled {background: gainsboro;}input[value]:disabled {color: whitesmoke;}
#25楼
您也可以使用javascript:void(0)
阻止表单提交。
<form action="javascript:void(0)" method="post"><label for="">Search</label><input type="text"><button type="sybmit">Submit</button>
</form>
<form action="javascript:void(0)" method="post"> <label for="">Search</label> <input type="text"> <button type="sybmit">Submit</button> </form>
#26楼
一个不错的简单jQuery小解决方案:
$("form").bind("keypress", function (e) {if (e.keyCode == 13) {return false;}
});
#27楼
您可以使用JavaScript方法检查是否按下了Enter键,如果是,则停止提交。
<script type="text/javascript">function noenter() {return !(window.event && window.event.keyCode == 13); }
</script>
只需在Submit方法上调用它即可。
#28楼
您可以使用诸如
$(document).ready(function() {$(window).keydown(function(event){if(event.keyCode == 13) {event.preventDefault();return false;}});
});
在阅读原始帖子的评论时,要使其更加有用,并允许人们在完成所有字段后按Enter键 :
function validationFunction() {$('input').each(function() {...}if(good) {return true;}return false;
}$(document).ready(function() {$(window).keydown(function(event){if( (event.keyCode == 13) && (validationFunction() == false) ) {event.preventDefault();return false;}});
});
#29楼
您可以按原样保留表单并添加一些额外的客户端验证,而不是阻止用户按Enter ,而是添加一些额外的客户端验证:调查未完成时,结果不会发送到服务器,并且用户会收到一条不错的消息告知需要完成哪些内容才能完成表格。 如果您使用的是jQuery,请尝试验证插件:
http://docs.jquery.com/插件/验证
这比单击Enter按钮需要更多的工作,但是可以肯定的是它将提供更丰富的用户体验。
#30楼
我必须捕获与按键有关的所有三个事件,以防止提交表单:
var preventSubmit = function(event) {if(event.keyCode == 13) {console.log("caught ya!");event.preventDefault();//event.stopPropagation();return false;}}$("#search").keypress(preventSubmit);$("#search").keydown(preventSubmit);$("#search").keyup(preventSubmit);
您可以将以上所有内容组合成一个不错的紧凑版本:
$('#search').bind('keypress keydown keyup', function(e){if(e.keyCode == 13) { e.preventDefault(); }});
通过按Enter阻止用户提交表单相关推荐
- PHP自学3——在html的table标签中显示用户提交表单
为了更好地显示用户提交表单,本节将在上一节的基础上将读取的用户表单显示在html的<table>标签中,这一节将用到和数组有关的知识. 本节代码将从外部文件(.txt文件)中读取信息于指定 ...
- php阻止form提交表单提交,防止表单提交时刷新页面-阻止form表单的默认提交行为...
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
- Form表单 回车(Enter)提交表单问题
Form表单 回车(Enter)提交表单问题 在Form表单中input会自动响应回车事件.这是表单的默认提交动作. 表单的提交行为,可以用两种方式定义,一是form表单自身,二是form表单的but ...
- 防止用户将表单重复提交的方法汇总
表单重复提交是在多用户Web应用中最常见.带来很多麻烦的一个问题.有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. ...
- php js 防止重复提交表单,php如何防止form重复提交
php如何防止form重复提交 引入cookie机制来解决(推荐学习:PHP编程从入门到精通) 用户提交表单到后端,在 Cookie 中做标记,指定时间内重复提交无效.但是用户禁用 Cookie 这个 ...
- Jquery提交表单 Form.js官方插件介绍
來源:http://hi.baidu.com/dereky/blog/item/f9e8ab64c52f4ff3f736540c.html [JQuery框架应用]:form.js官方插件介绍 For ...
- Jquery.form自动提交表单上传图片
先引入相关js文件 1 2 <script type="text/javascript" src="jquery-1.7.2.min.js">< ...
- jq html 回车提交表单,jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部.键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,documen ...
- 表单中enter键,导致表单提交
表单中enter键,导致表单提交 前几天,因为业务需求,测试人员发现项目有个这样的问题:一个输入框,按下enter后,导致页面刷新出现bug.排查了一会后,发现是因为enter导致了input外部的表 ...
最新文章
- 火星上的甲烷从哪里来,科学家用算法给出了答案
- 看看阿里的考核尺度, 阿里人工资高是有原因的
- 变量命名规则_JavaScript基础教程(二)变量、常量与运算符
- 关于Promise.all()的理解
- 计算机编程工程师理论知识,结构工程师基础知识点:程序设计语言
- 解题报告 Diamonds
- 郎溪 溪流_到无限(溪流)和超越!
- 卡巴斯基将支持微软企业安全解决方案Forefront
- Flask笔记-静态资源和链接的管理
- 【英语学习】【WOTD】 logy 释义/词源/示例
- Ionic3在ts中获取html中值的方法
- 【数据结构笔记06】队列及其顺序存储、链式存储
- HDOJ 1007(T_T)
- mplab java失败_Microchip工程师社区 - MPLABX用PICC编译失败 - Microchip C语言编译器论坛 - 麦田论坛...
- Entry模拟对输入的密码进行验证是否符合规范
- 计算机应用基础第一章ppt,计算机应用基础第一章课件.ppt
- JS正则表达式--正则量词与元字符
- PopClip for Mac 增强型复制粘贴工具
- 时隔一年才发现嵌入式到底指的是什么
- 光场相机重聚焦原理之——光场的参数化表征
热门文章
- Linux内核分析课程期中总结
- Lucene开发(一):快速入门
- Setting up NUnit for C# Unit Testing with Visual Studio C# Express 2008
- prism v2之旅(7)
- tomcat安装-tomcat8.5
- [PATCH] UBUNTU: SAUCE: (no-up) apparmor: Sync to apparmor3 - RC1(v3.4.x kernel)
- 标准C++的类型转换符:static_cast、dynamic_cast、reinterpret_cast和const_cast
- Web中间件常见安全漏洞总结
- Python办公自动化(三)|批量合并PDF
- 【数据仓库】数据仓库的发展史