javascript - 使按钮响应 Enter 键

Question

我的表单上有一个按钮，单击该按钮时，它会获取文本框的值并将该值填充到列表中。通常，当有人在表单上按下回车键时，表单就会被提交，但我已经编写了以下代码来阻止这种行为:

$(document).on("keypress",
    "form",
    function(event) {
        return event.keyCode != 13;
    });

但是，现在我希望将 Enter 键的功能用于表单上的按钮。截至目前，我有以下代码(基于点击)用于其当前功能:

$("#WL-Add-Btn").click(function () {
    var myVal = $("#WL-TxtBox").val();
    console.log(myVal);
    var uid = generateId();
    $("#Weight-Location-Count-List")
        .append("<li data-uid='" + uid + "' data-id='" +
            myVal +
            "' class='list-group-item list-group-item-default text-info mb-1' >" +
            myVal +
            " <button type='button' class='close remove-button'>&times;</button></li>");
    $("#Weigh-Location-Count-ListBox").append("<option data-uid='" +
        uid +
        "' selected='true' value='" +
        myVal +
        "'>" +
        myVal +
        "</option>");
    $("#WL-TxtBox").val("");
});

如何使该按钮同时响应单击和回车键？

Answer 1

1. 将按钮设置为提交
2. 将其与文本框一起放入表单内
3. 处理表单提交事件而不是按钮单击事件
4. 在按键处理程序中，检查事件的目标。如果这是您关心的文本框，请输入内容。

示例

<form id="frm">
    <textarea id="WL-TxtBox"></textarea>
    <button type="submit" id="WL-Add-Btn">Button</button>
</form>


$(document).on("keypress",
"form",
function(event) {
    return !$(event.target).is($("#WL-TxtBox")) && event.keyCode != 13;
});

$("#frm").submit(function (e) {
var myVal = $("#WL-TxtBox").val();
console.log(myVal);
var uid = generateId();
$("#Weight-Location-Count-List")
    .append("<li data-uid='" + uid + "' data-id='" +
        myVal +
        "' class='list-group-item list-group-item-default text-info mb-1' >" +
        myVal +
        " <button type='button' class='close remove-button'>&times;</button></li>");
$("#Weigh-Location-Count-ListBox").append("<option data-uid='" +
    uid +
    "' selected='true' value='" +
    myVal +
    "'>" +
    myVal +
    "</option>");
$("#WL-TxtBox").val("");

e.preventDefault();
});