Jump to content
Sign in to follow this  
rain13

How do I reliably detect input change?

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>

 

Share this post


Link to post
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>

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...