gpt4 book ai didi

javascript - 按 Enter 键触发与 HTML 按钮相关的 JavaScript 函数。 (不使用Tab键)

转载 作者:行者123 更新时间:2023-12-03 05:43:30 30 4
gpt4 key购买 nike

我的目的是创建一个按钮,通过按 Enter 键可以触发与其绑定(bind)的 JavaScript 函数(警报“按钮工作!”)。但只有使用 Tab 键突出显示该按钮后才有效。我尝试过 JavaScript 和 JQuery 解决方案,但没有成功。我怎样才能让它工作而不需要摆弄Tab键?这是代码:

<html>
<head>
<title>Enter Press Test</title>
</head>
<body>

<p style="text-align: center;" >

<button id="button1" onclick="alert('Button works!');" onkeypress="handle(event)">
Start Test
</button>
</p>

<!--<script type="text/javascript">
function handle(e) { // JavaScript solution
if (e.keyCode === 13) {
alert("Button works!");
}
}
</script>-->

<script type="text/javascript">
$("#button1").keyup(function(event) { // JQuery solution
if (event.keyCode == 13) {
$("#button1").click();
}
});
</script>

<script type="text/javascript" scr='./scritps/jquery-3.1.1.min.js'></script>

</body>
</html>

最佳答案

将事件监听器添加到 document 元素而不是 #button1:

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

$('#button1').click(function(){
alert('Button works!');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>

<head>
<title>Enter Press Test</title>
</head>

<body>

<p style="text-align: center;">

<button id="button1">
Start Test
</button>
</p>

</body>

</html>

关于javascript - 按 Enter 键触发与 HTML 按钮相关的 JavaScript 函数。 (不使用Tab键),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40421984/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com