Question

我有一个小测验，我试图让它得到它，以便在用户输入答案后，他们可以点击提交按钮或按键盘上的回车键。我尝试使用回调函数来捕获这两个实例。

        <form>
            <input id="answer"></input>
            <button id="btn" class="submit">SUBMIT</button>
        </form>

        var callback = function() {
            var myAnswer = document.getElementById('answer').value;
            if (myAnswer == "y" || myAnswer == "Y" ) {
                $('.content-bd').html("<p>Well done!<p>");
            }
            else {
                $('.content-bd').html("<p>Try again<p>");
            }
        };

        $("input").keypress(function() {
            if (event.which == 13) callback();
        });

        $('#btn').click(callback);

Answer 1

您缺少收集event。

$("input").keypress(function(event) {
    if (event.which == 13) callback();
});

Answer 2

至少有四个问题：

type的默认button为submit，因此点击该按钮将提交表单（并刷新页面）。如果您不想要，请将type="button"添加到button。
input代码为无效代码，您永远不会写</input>
As AjAX. says，您忘记在event回调中声明keypress参数，因此您依赖全局event在Firefox上不存在。（它适用于Chrome或IE。）
如果某个浏览器只有一个input并且用户按Enter键，则会提交该表单。如果您不希望这种情况发生，请阻止表单提交。

所以：

＆＃13;

var callback = function() {
    var myAnswer = document.getElementById('answer').value;
    if (myAnswer == "y" || myAnswer == "Y" ) {
        $('.content-bd').html("<p>Well done!<p>");
    }
    else {
        $('.content-bd').html("<p>Try again<p>");
    }
};

$("input").keypress(function(event) {
    if (event.which == 13) callback();
});

$('#btn').click(callback);

$("form").submit(false);

＆＃13;

<form>
    <input id="answer" type="text">
    <button type="button" id="btn" class="submit">SUBMIT</button>
</form>
<div class="content-bd"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＆＃13;

Answer 3

它的keydown函数不是按键和传递事件。

<input type="text" id="txt"/>

$('#txt').keydown(function (e){
    if(e.keyCode == 13){
        alert('you pressed enter ^_^');
    }
})

Answer 4

我真正喜欢的是甚至在包装表格上注册。这种方式使用可以像往常一样与页面进行交互。

$('form').submit(function (e) {
    e.preventDefault();

    ...
});

这样，用户既可以按下其中一个提交按钮，也可以在输入字段聚焦时按Enter键。

e.preventDefault()用于阻止浏览器实际提交表单，这会导致页面刷新。

这种方法的另一个好处是，将来如果更改了表单并添加了新的字段/提交按钮，事件仍然可以正确处理。

干杯。

如何组合点击事件＆amp;关键的keydown？

4 个答案: