我在一个网站上有一个调查，用户按下回车键(我不知道为什么)，不小心没有点击提交按钮就提交了调查(表单)，这似乎有些问题。有办法防止这种情况吗?
我在调查中使用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>
其他回答
只有块提交，而不是其他，重要的功能输入键，如创建一个新的段落在<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>
在我的特定情况下，我必须停止ENTER提交表单，并模拟单击提交按钮。这是因为提交按钮上有一个点击处理程序，因为我们在一个模态窗口中(继承了旧代码)。在任何情况下，这是我的组合解。
$('input,select').keypress(function(event) {
// detect ENTER key
if (event.keyCode == 13) {
// simulate submit button click
$("#btn-submit").click();
// stop form from submitting via ENTER key press
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
});
这个用例对于使用IE8的人特别有用。
不需要阻止用户按Enter键(这似乎不自然)，您可以让表单保持原样，并添加一些额外的客户端验证:当调查未完成时，结果不会发送到服务器，用户会收到一条漂亮的消息，告诉需要完成哪些内容才能完成表单。如果您正在使用jQuery，请尝试验证插件:
http://docs.jquery.com/Plugins/Validation
这将需要比捕捉Enter按钮更多的工作，但肯定会提供更丰富的用户体验。
没有提交按钮也行。只需在输入(type=button)中放入一个脚本，如果希望它提交表单中的数据，则添加eventListener。
而是使用这个
<input type="button" onclick="event.preventDefault();this.closest('form').submit();">
而不是用这个
<input type="submit">
注意:这里需要onclick在点击时实际提交表单。默认情况下，type="button"不足以提交。
您可以使用一种方法，例如
$(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;
}
});
});
