停止按键事件答案

【问题标题】：Stop keypress event停止按键事件
【发布时间】：2009-09-10 10:54:00
【问题描述】：

如何在keydown 中停止keypress 事件。

我有一个 keydown 处理程序，我需要停止 keypress 事件。

其实我里面有一个表格和文本框。

当用户按下 enter 键时，keydown 正在触发事件并拥有处理程序。

表单提交将在keypress 中触发，因此我需要在我的keydown 处理程序中停止keypress 事件。

【问题讨论】：

标签： javascript dom-events keypress

【解决方案1】：

function onKeyDown(event) {   
  event.preventDefault();
}

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-preventDefault

或

function onsubmit(event) {
  return false;
}

返回 false 以停止事件传播

【讨论】：

var suppressEvent = false;函数 onKeyDown(event) { suppressEvent = true; event.preventDefault(); } function onKeyPress(event) { if (suppressEvent) event.preventDefault(); }
非常感谢@john。这帮助我解决了一个问题，我的自定义事件处理程序导致输入键移动到 html 表中的下面的单元格 AND 在该新单元格中添加了不必要的额外新行。我只需要取消回车键的默认事件。

【解决方案2】：

在这里我停止了向上/dn/左/右键的事件冒泡：

    $(document).on("keydown", function(e) {
        if(e.keyCode >= 37 && e.keyCode <= 40) {
            e.stopImmediatePropagation();
            return;
        }
    });

我也从上面的答案中尝试了 e.preventDefault 或 event.cancelBubble = true，但它们没有任何影响。

【讨论】：

【解决方案3】：

在 Opera 中，您必须使用 keypress 事件来防止键盘事件的默认操作。 keydown 用于阻止所有浏览器中的默认操作，但在 Opera 中则不然。

请参阅this long list of inconsistencies 了解跨浏览器的键盘处理。

【讨论】：

keyPress 现在是 obsolete。

【解决方案4】：

写，

    <script type="text/javascript">
      function keyDn(obj)
      {
        if(window["event"]["keyCode"]==48)  // key 0 will disabled keyPress event
         {
           obj["onkeypress"]=null;
          }
       }
      function keyPs(obj)
      {
        alert("Keypress");
      }

    </script>

  <form id="form1" runat="server">
    <div>
     <input type="text" onkeydown="keyDn(this)" onkeypress="keyPs(this)" />
    </div>
  </form>

在 keydown 处理程序中。

【讨论】：

【解决方案5】：

在事件处理程序中尝试event.cancelBubble = true。

【讨论】：

【解决方案6】：

我能够得到 event.preventDefault();在 Safari 和 Firefox 中工作，但不能在 IE7 或 IE8 中工作。

如果您只想禁用 Enter 键，请确保您还检查了键值（Enter 为 13）并且仅为该键设置 event.preventDefault()。

谁能为 IE7/8 或 Opera 提供答案？

【讨论】：

我知道这是一个非常古老的线程，但由于您的问题仍未得到解答，我会的。事实上，我最近为您指定的问题找到了一种解决方法：您让表单在提交时返回 false 并隐藏和禁用您的提交按钮。然后创建第二个按钮（不是提交类型），它实际上将删除 onsubmit 事件的 return false 属性并删除按钮的禁用。之后，您使用此按钮模拟真实提交按钮上的单击事件。您可以在这里找到一个工作示例：jsfiddle.net/rsauxil/qyf8L/6。

【解决方案7】：

<input type="text" name="date" id="date" class="form-control select-calender" placeholder="Choose Date" value="" required >

$(document).on('keypress','#date',function(e){
  e.preventDefault();
});

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。