我在一个网站上有一个调查,用户按下回车键(我不知道为什么),不小心没有点击提交按钮就提交了调查(表单),这似乎有些问题。有办法防止这种情况吗?
我在调查中使用HTML, PHP 5.2.9和jQuery。
我在一个网站上有一个调查,用户按下回车键(我不知道为什么),不小心没有点击提交按钮就提交了调查(表单),这似乎有些问题。有办法防止这种情况吗?
我在调查中使用HTML, PHP 5.2.9和jQuery。
当前回答
在我的情况下,我有一对jQuery UI自动完成字段和文本区域的形式,所以我肯定希望他们接受进入。所以我从表单中删除了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()将成功并提交表单。
其他回答
为了阻止表单被提交,我必须捕获所有与按下键相关的三个事件:
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(); }
});
在我对其他解决方案感到沮丧之后,这在所有浏览器中都有效。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!');}
);
});
我需要防止只提交特定的输入,所以我使用了一个类选择器,让它成为我需要的“全局”特性。
<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />
jQuery代码:
$('.idNoEnter').keydown(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
或者,如果keydown不够用:
$('.idNoEnter').on('keypress keydown keyup', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
一些注意事项:
在这里修改各种不错的答案,Enter键似乎适用于所有浏览器的keydown。对于替代方法,我将bind()更新为on()方法。
我是类选择器的忠实粉丝,权衡所有的利弊和性能讨论。我的命名约定是'idSomething',表示jQuery将其用作id,以将其与CSS样式分开。
这是我达到目标的解决方案, 它干净有效。
$('form').submit(function () {
if ($(document.activeElement).attr('type') == 'submit')
return true;
else return false;
});
禁止在任何地方输入键
如果你的表单中没有<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非文本输入,所以这不是一个好的选择器。