Jump to content

How do I reliably detect input change?


rain13

Recommended Posts

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

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

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 by jac22
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...