禁用表单的输入密钥
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了禁用表单的输入密钥相关的知识，希望对你有一定的参考价值。
我一直在尝试禁用表单上的Enter键。我的代码如下所示。由于某种原因，回车键仍然触发提交。代码在我的脑子部分，似乎从其他来源是正确的。
disableEnterKey: function disableEnterKey(e){
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
return (key != 13);
},
如果你使用jQuery，它很简单。干得好
$(document).keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
}
});
解决方案很简单：
用按钮替换“提交”类型
<input type="button" value="Submit" onclick="this.form.submit()" />
我在这里找到的更好的方法：
Dream.In.Code
action="javascript: void(0)"或action="return false;"（对我不起作用）
大多数答案都在jquery中。您可以在纯Javascript中完美地完成此操作，简单且无需库。这里是：
<script type="text/javascript">
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>
这段代码效果很好，因为它只会禁用输入type ='text'的“Enter”按键操作。这意味着访问者仍然可以在textarea和所有网页中使用“Enter”键。他们仍然可以通过“提交”按钮和“Tab”键并点击“Enter”来提交表格。
以下是一些亮点：
- 它是纯粹的javascript（不需要库）。
- 它不仅检查按下的键，还确认是否在输入type ='text'表单元素上点击了“Enter”。 （这导致最错误的形式提交
- 与上述一起，用户可以在任何其他地方使用“Enter”键。
- 它简短，干净，快速，直接。
如果你想为其他动作禁用“Enter”，你可以添加console.log（e）;为了您的测试目的，并在Chrome中点击F12，转到“控制台”选项卡并点击页面上的“退格”并查看其中的内容以查看返回的值，然后您可以定位所有这些参数以进一步增强代码以上是为了满足你对“e.target.nodeName”，“e.target.type”以及更多......的需求......
试试这个^^
$(document).ready(function() {
$("form").bind("keypress", function(e) {
if (e.keyCode == 13) {
return false;
}
});
});
希望这可以帮助
这是使用jQuery实现此目的的一种简单方法，它将其限制为适当的输入元素：
//prevent submission of forms when pressing Enter key in a text input
$(document).on('keypress', ':input:not(textarea):not([type=submit])', function (e) {
if (e.which == 13) e.preventDefault();
});
感谢这个答案：https://stackoverflow.com/a/1977126/560114。
在您的表单标记中只需粘贴：
onkeypress="return event.keyCode != 13;"
例
<input type="text" class="search" placeholder="search" onkeypress="return event.keyCode != 13;">
如果您想在键入时进行搜索并忽略ENTER，这可能很有用。
/// Grab the search term
const searchInput = document.querySelector('.search')
/// Update search term when typing
searchInput.addEventListener('keyup', displayMatches)
对于非JavaScript的解决方案，尝试将<button disabled>Submit</button>放入表单中，放在任何其他提交按钮/输入之前。我建议在<form>开启标签之后立即（并使用CSS隐藏它，accesskey =' - 1'以使其脱离标签序列等）
当输入中的ENTER被击中时，AFAICT，user agents look for the first submit button，如果该按钮被禁用，则将停止寻找另一个按钮。
表单元素的默认按钮是树顺序中的第一个提交按钮，其表单所有者是该表单元素。
如果用户代理支持让用户隐式提交表单（例如，在某些平台上按下“enter”键，而文本字段被聚焦则隐式提交表单），然后对默认按钮具有已定义激活的表单执行此操作行为必须使用户代理在该默认按钮上运行合成单击激活步骤。
因此，如果禁用默认按钮，则在使用此类隐式提交机制时不会提交表单。 （禁用时按钮没有激活行为。）
但是，我知道Safari 10 MacOS在这里行为不端，即使默认按钮被禁用也会提交表单。
所以，如果你可以假设javascript，请插入<buttononclick="return false;">Submit</button>。在ENTER上，将调用onclick处理程序，并且由于它返回false，因此提交过程将停止。我用它测试过的浏览器甚至不会进行浏览器验证（重点是第一个无效的表单控件，显示错误信息等）。
如果你使用jQuery，你可以试试这样的东西。
$("form").bind("keydown", function(e) {
if (e.keyCode === 13) return false;
});
那将等待一个keydown，如果它是Enter，它将什么都不做。
只需在html代码中的<Head>标记中添加以下代码即可。它将在Enter键上表单提交表单上的所有字段。
<script type="text/javascript">
function stopEnterKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type == "text")) { return false; }
}
document.onkeypress = stopEnterKey;
</script>
我检查了上述所有解决方案，但它们无法正常工作。唯一可行的解决方案是为表单的每个输入捕获'onkeydown'事件。您需要将disableAllInputs附加到页面的onload或通过jquery ready（）
/*
* Prevents default behavior of pushing enter button. This method doesn't work,
* if bind it to the 'onkeydown' of the document|form, or to the 'onkeypress' of
* the input. So method should be attached directly to the input 'onkeydown'
*/
function preventEnterKey(e) {
// W3C (Chrome|FF) || IE
e = e || window.event;
var keycode = e.which || e.keyCode;
if (keycode == 13) { // Key code of enter button
// Cancel default action
if (e.preventDefault) { // W3C
e.preventDefault();
} else { // IE
e.returnValue = false;
}
// Cancel visible action
if (e.stopPropagation) { // W3C
e.stopPropagation();
} else { // IE
e.cancelBubble = true;
}
// We don't need anything else
return false;
}
}
/* Disable enter key for all inputs of the document */
function disableAllInputs() {
try {
var els = document.getElementsByTagName('input');
if (els) {
for ( var i = 0; i < els.length; i++) {
els[i].onkeydown = preventEnterKey;
}
}
} catch (e) {
}
}
以上是关于禁用表单的输入密钥的主要内容，如果未能解决你的问题，请参考以下文章