我在一个网站上有一个调查,用户按下回车键(我不知道为什么),不小心没有点击提交按钮就提交了调查(表单),这似乎有些问题。有办法防止这种情况吗?
我在调查中使用HTML, PHP 5.2.9和jQuery。
我在一个网站上有一个调查,用户按下回车键(我不知道为什么),不小心没有点击提交按钮就提交了调查(表单),这似乎有些问题。有办法防止这种情况吗?
我在调查中使用HTML, PHP 5.2.9和jQuery。
当前回答
只有块提交,而不是其他,重要的功能输入键,如创建一个新的段落在<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>
其他回答
Use:
// 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>
禁止在任何地方输入键
如果你的表单中没有<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非文本输入,所以这不是一个好的选择器。
使用Javascript(不检查任何输入字段):
<script>
window.addEventListener('keydown', function(e) {
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
e.preventDefault();
return false;
}
}, true);
</script>
如果有人想将此应用于特定的字段,例如输入类型text:
<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>
这对我来说很有效。
您可以创建一个JavaScript方法来检查是否按下了Enter键,如果按下了,就停止提交。
<script type="text/javascript">
function noenter() {
return !(window.event && window.event.keyCode == 13); }
</script>
只需在submit方法上调用它。
Use:
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.keyCode == 13) {
e.preventDefault();
return false;
}
});
这个解决方案适用于网站上的所有表单(也适用于使用Ajax插入的表单),只防止输入文本中的enter。把它放在文档就绪函数中,然后永远忘记这个问题。