javascript - 回车的跨浏览器keydown处理？

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
    }
}

请注意return在此函数和 HTML 事件中的使用以防止表单提交（这是在表单字段中按 [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

first of all, you must define event for the use in FF/Chrome/Opera/.. in the function definition and in the function call. (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;
    }
}

Note the use of return in both the function definition and the function call in the HTML markup. It prevents the form from submitting, which is the default behaviour when you hit enter in an input inside a form.

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
    }
}