如何获取 HTML 旋转框箭头以注册为 OnKeyUp 输入
[英]How to Get HTML Spin Box Arrows to Register as OnKeyUp Input
问题描述
I have this small HTML file that when I enter a number in the input field, its onkeyup attribute triggers a button
我有这个小的 HTML 文件，当我在输入字段中输入数字时，它的 onkeyup 属性会触发一个按钮
Link here: https://www.w3schools.com/code/tryit.asp?filename=G8P7G9W1MFF4链接在这里： 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>
The function triggers correctly when I type into the input field, but I want to know why the arrows don't trigger the function also.当我在输入字段中键入时，function 会正确触发，但我想知道为什么箭头也不会触发 function。
3 个解决方案
解决方案1
3 已采纳 2019-10-06 21:25:43
Because the spin buttons aren't keys and therefore don't register a keyup event.因为旋转按钮不是键，因此不注册 keyup 事件。 But, you can register for the input event , which will trigger when the buttons are used.但是，您可以注册input事件，该事件将在使用按钮时触发。
Also, you're using some 25+ year old syntax, which you really should abandon.此外，您正在使用一些 25 年以上的语法，您真的应该放弃。 Don't set up your events inline with HTML and don't use .getElementsByClassName() . 不要使用 HTML 设置您的事件， 也不要使用.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>
解决方案2
2 2019-10-07 01:22:29
Hi you could use id instead class , like so:嗨，您可以使用id代替class ，如下所示：
const input = document.getElementById("myInput"); const btn = document.getElementById("myButton"); const myFunction = () => { if(input.value > 0) { btn.click(); } } input.addEventListener("keyup", myFunction); input.addEventListener("input", myFunction); btn.addEventListener("click", () => console.log("myButton clicked")); <input id="myInput" type=number min="1" max="5" value="1" class="example" name="text"> <button id="myButton">Try it</button>
解决方案3
1 2019-10-06 21:25:19
You should use oninput instead of onKeyUp :您应该使用oninput而不是onKeyUp ：
<;DOCTYPE html> <html> <head> </head> <body> <input type=number min="1" max="5" value="1" class="example" name=text oninput=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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.