代码之家 › 专栏 › 技术社区 › Grizzly

使按钮响应回车键

jquery javascript

Grizzly · 技术社区 · 6 年前

我的表单上有一个按钮,当单击该按钮时,它会获取文本框的值并将该值填充到列表中。通常,当有人点击表单上的enter键时,表单就会被提交,但我写了这样一段话来阻止这种行为:

$(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("");
});

2 回复 | 直到 6 年前

just.another.programmer 6 年前

使按钮成为 submit
把它放在一个盒子里 form 以及文本框
在keypress处理程序中,检查事件的目标。如果你关心的是文本框,就让回车键通过。

样品

<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();
});

Michael Tsirulnikov 6 年前

创建一个函数,该函数将从click和enter键调用,假设您调用了action()。

然后按下按钮时,执行以下操作:

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

并更换

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

6 月前

user28928120 · 如何在jquery中选择所有类?

7 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

7 月前

Eliable · 使点击计数器和进度条协同工作

7 月前

mlri · 从不同的onclick事件执行相同的javascript函数

7 月前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

7 月前

Jack Maessen · 在处理程序上使用时如何获取输入类型

8 月前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

8 月前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

8 月前