Javascript 禁用表单的输入键
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5629805/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabling enter key for form
提问by Chris Pinski
I have been trying to disable the Enterkey on my form. The code that I have is shown below. For some reason the enter key is still triggering the submit. The code is in my head section and seems to be correct from other sources.
我一直在尝试禁用Enter表单上的键。我拥有的代码如下所示。由于某种原因，回车键仍在触发提交。代码在我的头部部分，从其他来源看来似乎是正确的。
disableEnterKey: function disableEnterKey(e){
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
return (key != 13);
},
回答by Steven Jiang
if you use jQuery, its quite simple. Here you go
如果你使用jQuery，它很简单。干得好
$(document).keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
}
});
回答by Tarik
Most of the answers are in jquery. You can do this perfectly in pure Javascript, simple and no library required. Here it is:
大多数答案都在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>
This code works great because, it only disables the "Enter" keypress action for input type='text'. This means visitors are still able to use "Enter" key in textarea and across all of the web page. They will still be able to submit the form by going to the "Submit" button with "Tab" keys and hitting "Enter".
此代码效果很好，因为它仅禁用输入 type='text' 的“Enter”按键操作。这意味着访问者仍然可以在 textarea 和整个网页中使用“Enter”键。他们仍然可以通过使用“Tab”键转到“提交”按钮并按“Enter”来提交表单。
Here are some highlights:
以下是一些亮点：
- It is in pure javascript (no library required).
- Not only it checks the key pressed, it confirms if the "Enter" is hit on the input type='text' form element. (Which causes the most faulty form submits
- Together with the above, user can use "Enter" key anywhere else.
- It is short, clean, fast and straight to the point.
- 它是纯 javascript（不需要库）。
- 它不仅会检查按下的键，还会确认是否在 input type='text' 表单元素上点击了“Enter”。（这导致最错误的表单提交
- 与上述一起，用户可以在其他任何地方使用“Enter”键。
- 它简短、干净、快速且直截了当。
If you want to disable "Enter" for other actions as well, you can add console.log(e); for your your test purposes, and hit F12 in chrome, go to "console" tab and hit "backspace" on the page and look inside it to see what values are returned, then you can target all of those parameters to further enhance the code above to suit your needs for "e.target.nodeName", "e.target.type"and many more...
如果您还想为其他操作禁用“Enter”，您可以添加 console.log(e); 为了您的测试目的，并在 chrome 中点击 F12，转到“控制台”选项卡并点击页面上的“退格”并查看其内部以查看返回的值，然后您可以定位所有这些参数以进一步增强代码以上以满足您对"e.target.nodeName"、"e.target.type"等的需求...
回答by Kent
try this ^^
试试这个^^
$(document).ready(function() {
$("form").bind("keypress", function(e) {
if (e.keyCode == 13) {
return false;
}
});
});
Hope this helps
希望这可以帮助
回答by YASH GAUTAMI
In your form tag just paste this:
在你的表单标签中粘贴这个：
onkeypress="return event.keyCode != 13;"
Example
例子
<input type="text" class="search" placeholder="search" onkeypress="return event.keyCode != 13;">
This can be useful if you want to do search when typing and ignoring ENTER.
如果您想在键入和忽略 ENTER 时进行搜索，这会很有用。
/// Grab the search term
const searchInput = document.querySelector('.search')
/// Update search term when typing
searchInput.addEventListener('keyup', displayMatches)
回答by Matt Browne
Here's a simple way to accomplish this with jQuery that limits it to the appropriate input elements:
这是使用 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();
});
Thanks to this answer: https://stackoverflow.com/a/1977126/560114.
回答by Erics
For a non-javascript solution, try putting a <button disabled>Submit</button>into your form, positioned before any other submit buttons/inputs. I suggest immediately after the <form>opening tag (and using CSS to hide it, accesskey='-1' to get it out of the tab sequence, etc)
对于非 javascript 解决方案，尝试将 a<button disabled>Submit</button>放入您的表单中，放置在任何其他提交按钮/输入之前。我建议在<form>开始标签之后立即使用（并使用 CSS 隐藏它，accesskey='-1' 将其从选项卡序列中取出，等等）
AFAICT, user agents look for the first submit buttonwhen ENTERis hit in an input, and if that button is disabled will then stop looking for another.
AFAICT，用户代理会ENTER在输入中点击时查找第一个提交按钮，如果该按钮被禁用，则将停止寻找另一个。
A form element's default button is the first submit button in tree order whose form owner is that form element.
If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.
Consequently, if the default button is disabled, the form is not submitted when such an implicit submission mechanism is used. (A button has no activation behavior when disabled.)
表单元素的默认按钮是树形顺序中的第一个提交按钮，其表单所有者是该表单元素。
如果用户代理支持让用户隐式提交表单（例如，在某些平台上，在文本字段聚焦时点击“输入”键隐式提交表单），则为默认按钮具有定义激活的表单执行此操作行为必须导致用户代理在该默认按钮上运行合成点击激活步骤。
因此，如果禁用默认按钮，则在使用这种隐式提交机制时不会提交表单。（按钮在禁用时没有激活行为。）
However, I do know that Safari 10 MacOSmisbehaves here, submitting the form even if the default button is disabled.
但是，我知道Safari 10 MacOS在这里行为不端，即使默认按钮被禁用也提交表单。
So, if you can assume javascript, insert <buttononclick="return false;">Submit</button>instead. On ENTER, the onclick handler will get called, and since it returns false the submission process stops. Browsers I've tested this with won't even do the browser-validation thing (focussing the first invalid form control, displaying an error message, etc).
因此，如果您可以假设 javascript，请改为插入。On ， onclick 处理程序将被调用，并且由于它返回 false 提交过程停止。我测试过的浏览器甚至不会做浏览器验证的事情（聚焦第一个无效的表单控件，显示错误消息等）。<buttononclick="return false;">Submit</button>ENTER
回答by Samir Patel
The solution is so simple:
解决方法很简单：
Replace type "Submit" with button
用按钮替换“提交”类型
<input type="button" value="Submit" onclick="this.form.submit()" />
回答by Lakshan
this is in pure javascript
这是纯javascript
document.addEventListener('keypress', function (e) {
if (e.keyCode === 13 || e.which === 13) {
e.preventDefault();
return false;
}
});回答by Jaime Rodriguez
You can try something like this, if you use jQuery.
如果您使用 jQuery，您可以尝试这样的操作。
$("form").bind("keydown", function(e) {
if (e.keyCode === 13) return false;
});
That will wait for a keydown, if it is Enter, it will do nothing.
这将等待 keydown，如果是Enter，它什么都不做。
回答by Kailas Mane
Just add following code in <Head>Tag in your HTML Code. It will Form submission on Enter Key For all fields on form.
只需<Head>在 HTML 代码的 Tag 中添加以下代码。它将按 Enter Key 提交表单，用于表单上的所有字段。
<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>
