Question

我有这段代码：

<html>
    <title>a</title>
    <head>
        <script type="text/javascript" src="jquery-1.8.0.js"></script>
        <script type="text/javascript">
            $("#target").keypress(function(event) {
                if ( event.which == 13 ) {
                    alert("Enter has been clicked.");
                }
            }
        </script>
    </head>
<body>
    <input type="text" id="target"></input>
</body>
</html>

我想在输入框内单击输入后出现一个消息框。

感谢。

Answer 1

  // DOM ready handler
$(function() {
    $("#target").keypress(function(event) {
        if ( event.which == 13 ) {
            alert("Enter has been clicked.");
        }
    }); // missing ")"
});

还要记住顶部的doctype。

<!DOCTYPE html>

并删除结束输入标记。

<input type="text" id="target">

正如@David指出的那样，如果使用== vs ===进行相等比较，可能会有不同的结果。在这种情况下，它不会产生任何影响，但为了安全起见，通常使用===是个好主意，并在需要特定类型强制时使用==。

Answer 2

您的代码在<input>元素存在之前运行。您可以使用domready事件：

<script type="text/javascript">
$(function(){
  $("#target").keypress(function(event) {
    if ( event.which == 13 ) {
      alert("Enter has been clicked.");
    }
  });
});
</script>

或者稍后将该脚本标记放在文件中，可能就在</body>结束标记之前。

Answer 3

请参阅：http://jsfiddle.net/M8y5J/

修复语法错误
在document is ready时加载（请注意多种方式）
use on() to attach event handler

的JavaScript

$(function(){
    $("#target").on("keypress", function(e){   
        if ( e.which === 13 ) {
            alert("Enter has been clicked.");
        }
    });
});

完整的HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
        <script type="text/javascript">
            $(function () {
                $("#target").on("keypress", function (e) {
                    if (e.which === 13) {
                        alert("Enter has been clicked.");
                    }
                });
            });
        </script>
    </head>
    <body>
        <input type="text" id="target" />
    </body>
</html>

单击Enter时发出消息

3 个答案:

的JavaScript

完整的HTML