javascript 如何删除 HTML 表单中提交按钮的默认焦点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4335877/
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
how to remove the default focus on submit button in HTML form?
提问by Aashish
I have a HTML form on my page. When i am putting some value in one of the text fields in form and press 'Enter key' the form gets submitted instantly. I think this is happening due to default focus is on submit button. But i try to remove that focus using blur() function, it is not working. I am using Chrome. Is there any way to avoid this scenario? All suggestions are welcome. thanks in advance.
我的页面上有一个 HTML 表单。当我在表单中的文本字段之一中输入一些值并按“Enter 键”时，表单会立即提交。我认为这是由于默认焦点在提交按钮上而发生的。但是我尝试使用 blur() 函数移除该焦点，但它不起作用。我正在使用 Chrome。有什么办法可以避免这种情况吗？欢迎所有建议。提前致谢。
回答by Piskvor left the building
The Submit button is not actually focused; Enterin a text field is supposed to submit the form.
提交按钮实际上没有聚焦；Enter在文本字段中应该提交表单。
You could register a handler for the submitevent, and then only allow it if the Submit button was actually focused at the time submit was requested.
您可以为该submit事件注册一个处理程序，然后仅当在请求提交时提交按钮实际处于焦点时才允许它。
However, you'll be deliberately breaking the way that HTML forms work. Not everyone wants to submit the form using the One True Way of actually clicking the Submit button (also, you'll be breaking accessibility and may introduce browser-specific bugs).
但是，您将故意破坏 HTML 表单的工作方式。并非每个人都希望使用实际单击“提交”按钮的一种真正方式来提交表单（此外，您将破坏可访问性并可能引入特定于浏览器的错误）。
回答by Quentin
No. The focus is still on the text field. Pressing enter there is supposed to submit the form (and bypasses the submit button entirely).
不。焦点仍然在文本字段上。按回车键应该提交表单（并完全绕过提交按钮）。
You can suppress the behavior using JavaScript, but since it is normal behavior for the browser, I wouldn't recommend doing so.
您可以使用 JavaScript 抑制该行为，但由于这是浏览器的正常行为，我不建议这样做。
回答by mirco
try this solution: replace the 'input' with 'button' and add attribute type equals 'button' and handle the onclick event with submit javascript function
试试这个解决方案：用“按钮”替换“输入”并添加属性类型等于“按钮”并使用提交javascript函数处理onclick事件
<form name='testForm'>
<input type='text' value="myName" />
<button type='button' onclick='testForm.submit()'/>
</form>
i think it works also with tag input adding the same attribute Enjoy Mirco
我认为它也适用于添加相同属性的标签输入 享受 Mirco
回答by Dmitrii Malyshev
The easiest way is to set css style like this:
最简单的方法是像这样设置 css 样式：
&:focus {
outline: 0 none;
}
回答by jwueller
blur()is the way to go. It works like this:
blur()是要走的路。它是这样工作的：
<button onclick="this.blur();">some button</button>
Note that you should not use JavaScript and DOM-events using Attributes. This is just for demonstration purposes. Try to be unobstrusive.
请注意，您不应使用属性来使用 JavaScript 和 DOM 事件。这仅用于演示目的。尽量不引人注目。
回答by Trufa
Maybe it will help you out, the form is "supposed" to be sent with enter in the text box (HTML by design), it is no a matter of focus.
也许它会帮助你，表单“应该”在文本框中输入（HTML设计）发送，这不是焦点问题。
If you want to avoid it, check thisout.
如果你想避免它，看看这个。
This is the proposed script:
这是建议的脚本：
function disableEnterKey(e)
{
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
return (key != 13);
}
Good luck, tell me if you need any clarification!
祝你好运，如果您需要任何说明，请告诉我！
EDIT:I do agree with Piskvor answer, it may bring some bugs
编辑：我同意Piskvor 的回答，它可能会带来一些错误
回答by oezi
this has nothing to do with the focus, its just the default behavior of you browser. to avoid this, you could try to cath the enter-keypress like this (Source- but there are a lot of other solutions(most working the same way, just using other events like the firms onsubmit instead of the documents onkeypress)):
这与焦点无关，它只是您浏览器的默认行为。为避免这种情况，您可以尝试像这样输入 enter-keypress（来源- 但还有很多其他解决方案（大多数工作方式相同，只是使用其他事件，例如公司 onsubmit 而不是文档 onkeypress））：
function catchEnter(e){
// Catch IE's window.event if the
// ‘e' variable is null.
// FireFox and others populate the
// e variable automagically.
if (!e) e = window.event;
// Catch the keyCode into a variable.
// IE = keyCode, DOM = which.
var code = (e.keyCode) ? e.keyCode : e.which;
// If code = 13 (enter) or 3 (return),
// cancel it out; else keep going and
// process the key.
if (code == 13 || code == 3)
return false;
else
return true;
}
// Anonymous method to push the onkeypress
// onto the document.
// You could finegrain this by
// document.formName.onkeypress or even on a control.
window.onload = function() { document.onkeypress = catchEnter; };
回答by Marco Leo
try to add on the keypress event of your button this javascript function :
尝试在按钮的按键事件上添加这个 javascript 函数：
function ButtonKeyPress()
{
var code = (window.event.which) ? window.event.which : window.event.keyCode;
if ( code == 13 )
{
event.returnValue = false;
return false;
}
return true;
}
回答by robertc
Change:
改变：
<input type="text" ... >
To:
到：
<textarea ... ></textarea>
You may need to mess around with the attributes a bit, I've left them signified as ....
您可能需要稍微处理一下属性，我将它们标记为....
回答by Nicolas
So, you have a form. In this form, you have a text input, and a submit button. You get in the text input, you type some text, than you press "Enter". This submits the form. You would like to break this normal behavior.
所以，你有一个表格。在此表单中，您有一个文本输入和一个提交按钮。您进入文本输入，输入一些文本，然后按“Enter”。这将提交表单。您想打破这种正常行为。
I think this is not a good idea : The convention says that when your in a text input and press "Enter", it submits the form. If you change this behavior, users could be (I don't find the right word, let's say ~) surprised.
我认为这不是一个好主意：约定说当您输入文本并按“Enter”时，它会提交表单。如果您更改此行为，用户可能会（我没有找到正确的词，比如说 ~）感到惊讶。
Anyway, if you still want to do this, you should listen for the keypress event on the text input, and than prevent default behaviour shoud do the work.
无论如何，如果您仍然想这样做，您应该监听文本输入上的按键事件，而不是阻止默认行为来完成这项工作。
let's say you use jQuery :
假设您使用 jQuery：
$(input[type=text]).bind('keypress', function(evt) {
if(evt.keyCode == 13) {
evt.preventDefault();
}
});
This should do it. I didn't test it, maybe I made mistakes, but you got the idea, no ?
这应该做。我没有测试它，也许我犯了错误，但你明白了，不是吗？
And maybe keyup is better than keypress... I don't know very well this, not enough practice on key bindings
也许 keyup 比 keypress 更好......我不太清楚这一点，没有足够的按键绑定练习
