使用JavaScript在文本框中的Enter键上触发按钮单击

这篇博客讨论了如何使用JavaScript在用户在文本框中按下Enter键时模拟按钮点击事件,避免表单的默认提交行为。文中提供了多种jQuery和纯JavaScript的实现方案,适合在不改变表单提交行为的情况下,实现特定按钮的Enter键触发效果。
摘要由CSDN通过智能技术生成

我有一个文本输入和一个按钮(见下文)。 当在文本框中按下Enter键时,如何使用JavaScript 触发按钮的click事件

当前页面上已经有一个不同的“提交”按钮,因此我不能简单地将该按钮设为“提交”按钮。 而且,如果从一个文本框中按下该按钮,我希望按Enter键即可单击该特定按钮,没有别的。

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

#1楼

对于jQuery Mobile,我必须要做

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});

#2楼

将按钮设为Submit元素,因此它将是自动的。

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

请注意,您需要一个包含输入字段的<form>元素才能完成此工作(感谢Sergey Ilinsky)。

重新定义标准行为不是一个好习惯, Enter键应始终调用表单上的Submit按钮。


#3楼

在jQuery中,以下将起作用:

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

 $("#pw").keyup(function(event) { if (event.keyCode === 13) { $("#myButton").click(); } }); $("#myButton").click(function() { alert("Button code executed."); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Username:<input id="username" type="text"><br> Password:&nbsp;<input id="pw" type="password"><br> <button id="myButton">Submit</button> 

或在普通的JavaScript中,以下方法将起作用:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

 document.getElementById("pw") .addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById("myButton").click(); } }); function buttonCode() { alert("Button code executed."); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Username:<input id="username" type="text"><br> Password:&nbsp;<input id="pw" type="password"><br> <button id="myButto
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值