我在一个网站上有一个调查,用户按下回车键(我不知道为什么),不小心没有点击提交按钮就提交了调查(表单),这似乎有些问题。有办法防止这种情况吗?
我在调查中使用HTML, PHP 5.2.9和jQuery。
我在一个网站上有一个调查,用户按下回车键(我不知道为什么),不小心没有点击提交按钮就提交了调查(表单),这似乎有些问题。有办法防止这种情况吗?
我在调查中使用HTML, PHP 5.2.9和jQuery。
当前回答
这是完美的方式,你不会从你的页面重定向
$('form input').keydown(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
});
其他回答
这里已经有很多好的答案,我只是想从用户体验的角度贡献一些东西。键盘控件在表单中非常重要。
问题是如何在按回车键时禁用提交。而不是如何在整个应用程序中忽略Enter。因此,考虑将处理程序附加到表单元素,而不是窗口。
禁用Enter表单提交仍然允许以下:
当提交按钮被聚焦时,通过输入提交表单。 填充所有字段时提交表单。 通过Enter与非提交按钮交互。
这只是一个样板,但它符合所有三个条件。
$(“形式”)。On ('keypress',函数(e) { //注册按键。 $attr = $(e.target).attr('type'); $node = e.target.nodeName.toLowerCase(); if ($ attr = = =“按钮”| | $ attr = = = '提交' | | $ node = = =“文本区域”){ 返回true; } //如果没有填充所有字段,则忽略按键。 if (e.which === 13 && ! fieldsarepopulate (this)) { 返回错误; } });
只有块提交,而不是其他,重要的功能输入键,如创建一个新的段落在<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>
在我的情况下,我有一对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()将成功并提交表单。
这将禁用页面上所有表单的输入键,并且不阻止在文本区域输入。
// disable form submit with enter
$('form input:not([type="submit"])').keydown((e) => {
if (e.keyCode === 13) {
e.preventDefault();
return false;
}
return true;
});
我需要防止只提交特定的输入,所以我使用了一个类选择器,让它成为我需要的“全局”特性。
<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样式分开。