Question

我的页面上有一个HTML表单。当我在表单中的某个文本字段中输入一些值并按“Enter键”时，表单会立即提交。我认为这是由于默认焦点是提交按钮而发生的。但我尝试使用blur（）函数删除该焦点，它无法正常工作。我正在使用Chrome。有没有办法避免这种情况？欢迎所有建议。提前谢谢。

Answer 1

提交按钮实际上并未集中; 在文本字段中输入应该提交表单。

您可以为submit事件注册处理程序，然后只有在请求提交时实际关注“提交”按钮时才允许它。

但是，您将故意破坏HTML表单的工作方式。并非所有人都希望使用实际单击“提交”按钮的One True Way提交表单（同样，您将破坏可访问性并可能引入特定于浏览器的错误）。

Answer 2

没有。重点仍放在文本字段上。按Enter键应该提交表单（并完全绕过提交按钮）。

你可以suppress the behavior using JavaScript，但由于这是浏览器的正常行为，我不建议这样做。

Answer 3

尝试此解决方案：将'input'替换为'button'并添加属性键入equals'button'并使用提交javascript函数处理onclick事件

<form name='testForm'>
<input type='text' value="myName" />
<button type='button' onclick='testForm.submit()'/>
</form>

我认为它也适用于添加相同属性的标签输入请享用的Mirco

Answer 4

blur()是要走的路。它的工作原理如下：

<button onclick="this.blur();">some button</button>

请注意，您不应使用属性使用JavaScript和DOM事件。这仅用于演示目的。尽量不引人注意。

Answer 5

也许它会帮助你，表单“应该”与文本框中的输入一起发送（HTML设计），这不是焦点问题。

如果您想避免它，请检查this。

这是建议的脚本：

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

     return (key != 13);
}

祝你好运，告诉我你是否需要澄清！

编辑：我同意Piskvor answer，可能会带来一些错误

Answer 6

这与焦点无关，它只是浏览器的默认行为。为了避免这种情况，你可以尝试使用这样的输入按键（Source - 但是有一个lot of other solutions（大多数工作方式相同，只是使用其他事件，如公司提交而不是文件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; };

Answer 7

尝试添加按钮的按键事件这个javascript函数：

function ButtonKeyPress()
 {

  var code = (window.event.which) ? window.event.which : window.event.keyCode;

  if ( code == 13 )
  { 
   event.returnValue = false;
   return false;
  }

  return true;

 }

Answer 8

变化：

<input type="text" ... >

要：

<textarea ... ></textarea>

您可能需要稍微处理一下属性，我将它们标记为...。

Answer 9

所以，你有一个表格。在此表单中，您有一个文本输入和一个提交按钮。您输入文本输入，键入一些文本，而不是按“Enter”。这提交了表格。你想打破这种正常行为。

我认为这不是一个好主意：惯例说当你在文本输入中按“Enter”时，它会提交表单。如果你改变了这种行为，用户可能会（我找不到合适的词，让我们说〜）感到惊讶。

无论如何，如果你仍然想要这样做，你应该在文本输入上听取按键事件，而不是防止默认行为，应该做好工作。

假设你使用jQuery：

$(input[type=text]).bind('keypress', function(evt) {
    if(evt.keyCode == 13) {
        evt.preventDefault();
    }
});

这应该这样做。我没有测试它，也许我犯了错误，但你明白了，不是吗？

也许keyup比keypress更好......我不太清楚这一点，关键绑定的做法不够

Answer 10

最简单的方法是设置css样式：

    &:focus {
      outline: 0 none;
    }

如何删除HTML表单中的提交按钮的默认焦点？

10 个答案: