rain13 Posted March 16, 2017 Share Posted March 16, 2017 Hi. How do I reliably detect input change? At first I tried on change but it didnt work. Now I try onkeypress but it also doesnt work. You always have to press key twice before button changes state. If the input is empty and button is disabled, you have to type either 2 digit number or work around hack is that you type in 1 digit number and then hit one of the arrow keys. The same is when next button is enabled and you delete the text from input. when delete all digits from the input, it will not disable next button until you have pressed something else. Could anyone explain why I always have to key press at least 2 times before it reacts? And how could I fix it so that it would immediately react when it changes? <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> function valueChanged(){ var inputValue = $("#interval_size").val(); if (inputValue == "") { $("#generalization_next").prop("disabled", true); } else { $("#generalization_next").prop("disabled", false); } } </script> </head> <body> <input type="number" id="interval_size" onkeypress="valueChanged()"> <input id="generalization_next" type="button" value="Next" disabled="disabled"> </body> </html> Link to comment Share on other sites More sharing options...
Ingolme Posted March 16, 2017 Share Posted March 16, 2017 Keydown and keyup events occur instantly. In text fields you can use the oninput event which detects whether a character was put into the input whether or not a keyboard did it. You shouldn't use HTML attributes for events, if you use proper event techniques you can determine which element fired the event. Now here's an example of how Javascript can make code shorter than jQuery does. <html> <head> <title>Example</title> </head> <body> <input type="number" id="interval_size"> <input id="generalization_next" type="button" value="Next" disabled="disabled"> <script> document.getElementById("interval_size").addEventListener("input", valueChanged); function valueChanged(e){ var inputValue = e.currentTarget.value; var target = document.getElementById("generalization_next"); target.disabled = inputValue == ""; } </script> </body> </html> Link to comment Share on other sites More sharing options...
jac22 Posted March 16, 2017 Share Posted March 16, 2017 (edited) this may work for you <input type="number" id="interval_size" onkeyup="valueChanged()"> you have onkeypress that triggers when the user press a key but the input has not changed jet but The onkeyup event occurs when the user releases a key (on the keyboard). so the input has already changed Edited March 16, 2017 by jac22 Link to comment Share on other sites More sharing options...
rain13 Posted March 18, 2017 Author Share Posted March 18, 2017 Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now