gpt4 book ai didi

javascript - 如何让 HTML Spin Box 箭头注册为 OnKeyUp 输入

转载 作者:搜寻专家 更新时间:2023-11-01 05:27:15 25 4
gpt4 key购买 nike

我有一个小的 HTML 文件,当我在输入字段中输入一个数字时,它的 onkeyup 属性会触发一个按钮

此处链接:https://www.w3schools.com/code/tryit.asp?filename=G8P7G9W1MFF4

<!DOCTYPE html>
<html>

<head>
</head>

<body>

<input type=number min="1" max="5" value="1" class="example" name=text onKeyUp=myFunction();>

<button id="myBtn" onclick="javascript:alert('Hello World!')">Try it</button>

<script>
function myFunction() {
var x = document.getElementsByClassName("example");
if (x[0].value > 0) {
document.getElementById("myBtn").click();
}
}
</script>

</body>

</html>

当我在输入字段中键入内容时,该函数会正确触发,但我想知道为什么箭头也不会触发该函数。

最佳答案

因为旋转按钮不是键,因此不注册 keyup 事件。但是,您可以注册 input event , 当按钮被使用时会触发。

此外,您正在使用一些 25 年以上的旧语法,您确实应该放弃这些语法。 Don't set up your events inline with HTMLdon't use .getElementsByClassName() .

<!DOCTYPE html>
<html>
<head>
<title>Fun with Events</title>
</head>
<body>

<input type=number min="1" max="5" value="1" class="example" name="text">
<button id="myBtn">Try it</button>

<script>
// Get your element references just once:
let input = document.querySelector("input.example");
let btn = document.getElementById("myBtn");

// Register event handlers
input.addEventListener("keyup", myFunction);
input.addEventListener("input", myFunction);

function myFunction() {
if(input.value > 0) {
document.getElementById("myBtn").click();
}
}

btn.addEventListener("click", function(){
alert('Hello World!');
});
</script>
</body>
</html>

关于javascript - 如何让 HTML Spin Box 箭头注册为 OnKeyUp 输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58261298/

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