跨浏览器键下处理回车

Question

我正在寻找一种跨浏览器解决方案来处理回车，从文本框提交输入。

我目前的问题是火狐...

未定义 JavaScript 事件

<input id="myinput" type="text" onkeydown="press();" value="X"/>
<script type="text/javascript">
function press() {
    if (event.keyCode == 13) {
    // do something
    }
}
<script>

我可以使用jquery。

Answer 1

event从何而来？ ：-）

以下是您正在寻找的解决方案：

// First, change the HTML to:
<input id="myinput" type="text" onkeydown="return press( event );" value="X" />
// Then, on the JS part:
function press( e ) {
    var evt = e || window.event
    // "e" is the standard behavior (FF, Chrome, Safari, Opera),
    // while "window.event" (or "event") is IE's behavior
    if ( evt.keyCode === 13 ) {
        // Do something
        // You can disable the form submission this way:
        return false
    }
}

请注意，在此函数和 HTML 事件中使用 return 来阻止表单提交（这是在表单字段中按 [Enter] 时的默认行为）。

但是，我建议删除HTML中的javascript部分，并直接使用：

document.getElementById('myinput').onkeydown = function( e ) {
    // Your code
}

这允许你拥有不显眼的javascript。

对于jQuery方式，这将是以下内容：

$('#myinput').on( 'keydown', function( e ) {
    // jQuery normalizes the "e" parameter, so you can use:
    if ( e.keyCode === 13 ) {
        // Do something
    }
} )

PS：event其实和window.event一样，这是IE的正确用法。这不是其他浏览器（FF，Chrome...）使用的标准。这就是为什么我们使用提供的技巧（var evt = e || window.event，其中e作为参数传递）。

Answer 2

首先，您必须在函数定义和函数调用中定义用于FF/Chrome/Opera/...的event。（ onkeydown ）

.HTML：

<form method="POST" action="/">
<input id="myinput" type="text" onkeydown="return press( event )" value="X"/>
</form>

JavaScript：

function press(e) {
    // IE uses "window.event", others pass the event as argument
    var evt = e || window.event;
    if (evt.keyCode == 13) {
        // do something
        alert("enter!");
        return false;
    }
}

请注意在 HTML 标记的函数定义和函数调用中使用return。它会阻止表单提交，这是您在表单内的输入中按 Enter 时的默认行为。

Answer 3

$('#myinput').keypress(function(e){
      if(e.which == 13){
         //do something.
         e.preventDefault();
       }  
});

Answer 4

您需要声明将传递给函数的事件参数：

function press(event) {
    if (event.keyCode == 13) {
    // do something
    }
}