我在一个网站上有一个调查,用户按下回车键(我不知道为什么),不小心没有点击提交按钮就提交了调查(表单),这似乎有些问题。有办法防止这种情况吗?
我在调查中使用HTML, PHP 5.2.9和jQuery。
我在一个网站上有一个调查,用户按下回车键(我不知道为什么),不小心没有点击提交按钮就提交了调查(表单),这似乎有些问题。有办法防止这种情况吗?
我在调查中使用HTML, PHP 5.2.9和jQuery。
当前回答
我已经使用此代码禁用输入类型[文本]和输入类型[密码]上的“ENTER”键,您可以添加其他太像输入类型[电子邮件]或也可以应用于您所需的输入类型。
$(document).on('keyup keypress', 'form input[type="text"] , input[type="password"]', function(e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
});
其他回答
不要在输入或按钮中使用type="submit"。 使用type="button"并使用js [Jquery/angular/etc]向服务器提交表单。
我想添加一些CoffeeScript代码(没有经过现场测试):
$ ->
$(window).bind 'keypress', (event) ->
if event.keyCode == 13
unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
event.preventDefault()
(我希望你喜欢这个“除非”从句中的妙招。)
我还不能评论,所以我会发布一个新的答案
接受的答案是ok-ish,但它不是停止提交在numpad进入。至少在当前版本的Chrome中是这样。我不得不改变这个键码条件,然后它工作。
if(event.keyCode == 13 || event.keyCode == 169) {...}
一种完全不同的方法:
The first <button type="submit"> in the form will be activated on pressing Enter. This is true even if the button is hidden with style="display:none; The script for that button can return false, which aborts the submission process. You can still have another <button type=submit> to submit the form. Just return true to cascade the submission. Pressing Enter while the real submit button is focussed will activate the real submit button. Pressing Enter inside <textarea> or other form controls will behave as normal. Pressing Enter inside <input> form controls will trigger the first <button type=submit>, which returns false, and thus nothing happens.
因此:
<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>
禁止在任何地方输入键
如果你的表单中没有<textarea>,那么只需将以下内容添加到你的<form>:
<form ... onkeydown="return event.key != 'Enter';">
或者使用jQuery:
$(document).on("keydown", "form", function(event) {
return event.key != "Enter";
});
这将导致表单内的每一次按键都将在该键上进行检查。如果它不是Enter,那么它将返回true,一切照常进行。如果它是Enter,那么它将返回false,任何事情都将立即停止,因此表单将不会提交。
keydown事件优先于keyup事件,因为keyup事件太晚而无法阻止表单提交。历史上也有按键,但这已弃用,KeyboardEvent.keyCode也是如此。你应该使用KeyboardEvent。键,返回所按键的名称。当选中Enter时,这将检查13(正常输入)和108 (numpad输入)。
请注意,在其他一些答案中建议的$(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">,那么你总是可以像下面那样细化选择器。
$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
// ...
});
请注意,在其他一些答案中建议的输入[type=text]不包括那些HTML5非文本输入,所以这不是一个好的选择器。