使按钮响应回车键

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. 使按钮成为submit
2. 将其与文本框一起放入form内
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();
});

Answer 2

创建一个将从单击和回车键调用的函数，假设你将其称为 action((。

然后，当按下按钮时，执行以下操作：

if (event.keyCode === 13) {
action()
}

并替换

$("#WL-Add-Btn").click(function () {....

跟

$("#WL-Add-Btn").click(action)