onChange 事件不会随着输入标签中值的变化而被调用
[英]onChange event not being called with change in value in input tag
问题描述
Unable to figure out why 'onChange' event is not firing with change in the value of.
无法弄清楚为什么“onChange”事件没有随着值的变化而触发。 The onChange event fires when I hit enter when the is in focus. onChange 事件在焦点处于焦点时按下回车键时触发。 I have added the 'change' event to the tag in a seperate JS file.我已将“更改”事件添加到单独的 JS 文件中的标签。
The basic function of the JS file is to take value from the and compare it with some strings, and output the matching strings. JS文件的基本function是取值和一些字符串比较，output是匹配的字符串。
//name of fruits let data=["apple","watermelon","orange","strawberry","grape","cherry","mango","nectarine","banana","pomegranate","raspberry","papaya","kiwi","pineapple","lemon","apricot","grapefruit","peach","avocado","passion fruit","plum","lime","blueberry","lychee","fig"] //------------------------------------// //Grabbing important elements let inputField = document.getElementsByTagName("input")[0]; let ul = document.getElementsByTagName("ul")[0]; //bindings inputField.addEventListener("change",onChangeHandler); //functions function onChangeHandler(){ //empty the ul before inserting anything ul.innerHTML=""; let queryString = inputField.value; if(queryString==""){ return; } for(i=0;i<data.length;i++){ if(data[i].indexOf(queryString)==0){ let li = document.createElement("li"); li.innerText = data[i]; ul.appendChild(li); } } }
<.DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div id="container"> <div id="search"> <input type="text"> </div> <ul id="output"> </ul> </div> <script src="script.js"></script> </body> </html>
3 个解决方案
解决方案1
1 2020-12-23 14:54:46
Try using input instead of change尝试使用 input 而不是 change
inputField.addEventListener("input",onChangeHandler);
the onChange event only fires when the input box loses focus. onChange事件仅在输入框失去焦点时触发。 The onInput event fires when the input is changed. onInput事件在输入更改时触发。
解决方案2
0 2020-12-23 14:52:01
Your handler is running but your test:您的处理程序正在运行，但您的测试：
if(data[i].indexOf(queryString)==0)
should be:应该：
if(data[i].indexOf(queryString)==-1)
because indexOf() returns -1 when the item isn't found, not 0 .因为indexOf()在找不到项目时返回-1 ，而不是0 。
Now, you've also got your loop and your if test a little backwards.现在，您还得到了您的循环和您的if测试有点倒退。 You need to check to see if the array already has the input value and if not, then add that value to the array... then loop over the array and make list items from it.您需要检查数组是否已经有输入值，如果没有，则将该值添加到数组中……然后遍历数组并从中生成列表项。
Also, don't use getElementsByTagName() in general because it returns a "live node list" and definitely don't put an index on the resulting list. 此外，一般不要使用getElementsByTagName() ，因为它会返回一个“活动节点列表”，并且绝对不会在结果列表中放置索引。 Instead, use .querySelector() (as shown below).相反，请使用.querySelector() （如下所示）。
//name of fruits let data = [ "apple", "watermelon", "orange", "strawberry", "grape", "cherry", "mango", "nectarine", "banana", "pomegranate", "raspberry", "papaya", "kiwi", "pineapple", "lemon", "apricot", "grapefruit", "peach", "avocado", "passion fruit", "plum", "lime", "blueberry", "lychee", "fig" ] //------------------------------------// //Grabbing important elements let inputField = document.querySelector("input"); let ul = document.querySelector("ul"); //bindings inputField.addEventListener("change", onChangeHandler); //functions function onChangeHandler(){ //empty the ul before inserting anything ul.innerHTML=""; let queryString = inputField.value; if(queryString==""){ return; } // First check to see if the input value is in the array: if(data.indexOf(queryString)==-1){ // It isn't, so add it to the array data.push(queryString); // Then loop over the array for(i=0;i<data.length;i++){ let li = document.createElement("li"); li.innerText = data[i]; ul.appendChild(li); } } }
<.DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div id="container"> <div id="search"> <input type="text"> </div> <ul id="output"> </ul> </div> <script src="script.js"></script> </body> </html>
解决方案3
-1 2020-12-23 14:57:03
inputField.addEventListener("input",onChangeHandler); inputField.addEventListener("输入",onChangeHandler);
Use input event instead of change event, Change event triggers when the element goes out of focus.使用 input 事件而不是 change 事件，Change 事件在元素失去焦点时触发。 The input event fires synchronously on change of the content for the element. input 事件在元素内容发生变化时同步触发。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.