禁用窗体的输入键

我一直在尝试禁用 Enter键在我的形式。我的代码如下所示。由于某种原因，回车键仍然触发提交。代码在我的头部部分，似乎是正确的从其他来源。

disableEnterKey: function disableEnterKey(e){
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox


return (key != 13);
},
165255 次浏览
小开

试试这个 ^ ^ 

$(document).ready(function() {
$("form").bind("keypress", function(e) {
if (e.keyCode == 13) {
return false;
}
});
});

希望这个能帮上忙

小开

如果使用 jQuery，您可以尝试这样做。

$("form").bind("keydown", function(e) {
if (e.keyCode === 13) return false;
});

这将等待一个关键字，如果它是 Enter，它将什么也不做。

小开
最佳答案

如果你使用 jQuery，它非常简单

$(document).keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
}
});
小开

只需在 HTML 代码中的 <Head>标记中添加以下代码即可。它将在表单上的所有字段的输入键上提交表单。

<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”事件。 您需要将 disableAllInput 附加到页面的 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) {
}
}
小开

下面是使用 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。

小开

大多数答案都在 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>

这段代码工作得很好，因为它只禁用了 input type = ‘ text’的“ Enter”按键操作。这意味着访问者仍然可以使用“回车”键在文本区域和所有的网页。他们仍然可以通过按“ Tab”键到“ Submit”按钮并点击“ Enter”来提交表单。

以下是一些亮点:

  1. 它使用纯 javascript (不需要库)。
  2. 它不仅检查按下的键，还确认在输入 type = ‘ text’表单元素上是否点击了“ Enter”。(导致最错误的表单提交
  3. 与上面一起，用户可以在任何地方使用“ Enter”键。
  4. 它简短、干净、快速、直截了当。

如果你还想在其他操作中禁用“ Enter”，你可以添加 console. log (e) ; 为了你的测试目的，在 chrome 中点击 F12，进入“ sole”选项卡，在页面上点击“ backspace”，查看返回的值，然后你可以针对所有这些参数进一步增强上面的代码，以满足你对 < em > “ e.target.nodeName”、 < em > “ e.target.type”和其他更多代码的需求..。

小开

对于一个非 javascript 的解决方案，尝试在表单中放置一个 <button disabled>Submit</button>，放在任何其他提交按钮/输入之前。我建议紧跟在 <form>开始标记之后(并使用 CSS 来隐藏它，acckey =’-1’来将它从选项卡序列中取出，等等)

当 ENTER在输入中被击中时，如果该按钮被禁用，那么将停止寻找另一个按钮。

表单元素的默认按钮是以树形顺序排列的第一个提交按钮，其表单所有者是该表单元素。

如果用户代理支持让用户隐式提交表单(例如，在某些平台上，当一个文本字段被聚焦时，按下“ Enter”键就可以隐式提交表单) ，那么对于一个默认按钮具有定义的激活行为的表单，这样做必须导致用户代理在该默认按钮上运行合成的单击激活步骤。

因此，如果默认按钮被禁用，那么当使用这种隐式提交机制时，就不会提交表单。(按钮在禁用时没有激活行为。)

Https://www.w3.org/tr/html5/forms.html#implicit-submission

但是，我知道 Safari 10 MacOS在这里行为不当，即使默认按钮被禁用，也要提交表单。

因此，如果可以假定使用 javascript，那么插入 <button onclick="return false;">Submit</button>。在 ENTER上，onclick 处理程序将被调用，由于它返回 false，提交过程将停止。我测试过的浏览器甚至不会进行浏览器验证(聚焦第一个无效的表单控件，显示错误消息等)。

小开

我找到了更好的办法:

梦，密码

action="javascript: void(0)"或 action="return false;"(对我不起作用)

小开

在你的表单标签中，只需要粘贴下面的内容:

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)
小开

解决办法很简单:

将类型“ Submit”替换为按钮

<input type="button" value="Submit" onclick="this.form.submit()" />
小开

这是纯 javascript

        document.addEventListener('keypress', function (e) {
if (e.keyCode === 13 || e.which === 13) {
e.preventDefault();
return false;
}
            

});

小开

我认为将一个类设置为一个表单要好得多，所以我编写了以下代码:

HTML

<form class="submit-disabled">

JS

/**
* <Start>
* Submit Disabled Form
*/
document
.querySelector('.submit-disabled')
.addEventListener('submit', function (e) {


e.preventDefault()
});
/**
* </End>
* Submit Disabled Form
*/

另外，如果你想禁用提交只有当 Enter Key按:

/**
* <Start>
* Submit Disabled Form
*/
document
.querySelector('.submit-disabled')
.addEventListener('keypress', function (e) {
if (e.keyCode === 13) {
e.preventDefault()
}
});
/**
* </End>
* Submit Disabled Form
*/
小开

HTML 档案:

@keypress="disableEnterKey($event)"

在 js 文件中:

disableEnterKey(e) {
if (e.keyCode === 13) {
e.preventDefault();
}
}
小开

首先，您需要在提交时禁用表单，但在单击按钮时重新启用它。在这种情况下不使用 哪个或 密码，从而避免了兼容性方面的一些问题。

    let formExample = document.getElementbyId("formExample");//selects the form
formExample.addEventListener("submit", function(event){ //must be used "submit"
event.preventDefault();// prevents "form" from being sent
})

要重新激活并通过单击按钮提交表单:

    let exampleButton = document.getElementById("exampleButton");
exampleButton.addEventListener("click", activateButton); //calls the function "activateButton()" on click
function activateButton(){
formExample.submit(); //submits the form
}

这种情况的一种变化是

    let exampleButton = document.getElementById("exampleButton");
exampleButton.addEventListener("click", activateBtnConditions); //calls the function "activateBtnConditions()" on click
function activateBtnConditions(){
if(condition){
instruction
}
else{
formExample.submit()
}
}
小开

下面是一个简单、现代的 被动反应解决方案，适用于:

  1. React，Solidjs，JSX 等。
  2. 是用 打印稿写的
  3. 支持服务器端呈现(SSR)
  4. 都是现代的浏览器
  5. 不需要 jQuery
  6. 阻止 <textarea>之外所有要允许 Enter的 Enter键
// avoids accidential form submission, add via event listener
function blockEnterKey(e: KeyboardEvent) {
if (e.key == "Enter" && !(e.target instanceof HTMLTextAreaElement)) {
e.preventDefault()
}
}


// add the event listener before the rendering return in React, etc.
if (typeof window !== undefined) {
window.addEventListener("keydown", blockEnterKey)
// the following line is for Solidjs. React has similar cleanup functionality
// onCleanup(() => document.body.removeEventListener("keydown", blockEnterKey))
}


return(
<form>
...
</form>
)

提交答案