pure javascript detect change in number typed input value

问题

window.onload = function init() {
  console.log("DOM is ready!");
  var input, value;
  
  input = document.getElementById("yourGuess");
  input = input.value;
  
  input.addEventListener("checking", check, false);
  
  check(value);
  
}

function check(value) {
  if(input < 0 && input > 10) {
    alert("The number must be between 0 - 10");
    value = 0;
  }
}

<label for="yourGuess">You choose: </label>
<input id="yourGuess" type="number" min="0" max="10">

I can't find any solution anywhere that correspond to the issue above.

So I have a number type input and declared a min and max attribute with the value 0 and 10 respectively.

The user can click the input field and change its value outside of range, hence I need to use javasricpt to check any changes made

回答1:

You're overwritting your HTMLInputElement with the value which is string, hence you're getting error.
Use onchange event along with document.addEventListener.
I've DOMContentLoaded method which gives you better idea instead of using window.onload!

document.addEventListener('DOMContentLoaded',function() {
    document.querySelector("#yourGuess").onchange=check;
},false);

function check(event) {
   if(event.target.value > 10 || event.target.value < 0){
      alert("The number must be between 0 - 10");
      event.target.value = 0;
   } 
}

<label for="yourGuess">You choose: </label>
<input id="yourGuess" type="number" min="0" max="10">

回答2:

Multiple issues in your code

You are setting input to the input.value so input becomes a String which doesn't have addEventListener
Use change event instead of checking.
check method doesn't have visibility to input, so rely on event.target.
Your if condition needs an OR || instead of &&

Demo

window.onload = function init() {
  console.log("DOM is ready!");      
  var input = document.getElementById("yourGuess");
  input.addEventListener("change", check, false);
}

function check ( event ) 
{
  var input = Number(event.target.value);
  console.log(input);
  if(input < 0 || input > 10) {
    alert("The number must be between 0 - 10");
    value = 0;
  }
}

<label for="yourGuess">You choose: </label>
<input id="yourGuess" type="number" min="0" max="10">

回答3:

function change(){
var num = document.getElementById("num").value;
if(num > 10 || num < 0){
alert("Number is not in range");
}
}

<input id="num" type="number" min="0" max="10" onchange="change()">

if you type number manually then you should left that input field to check or you can use other methods such as onkeypress etc.

回答4:

You are setting addeventlistener to the input value.

You are trying to use input in check function but it is not available in that method as it is not defined in the scope of that function.

    window.onload = function init() {
       console.log("DOM is ready!");
       var value;
       var input = document.getElementById("yourGuess");
       value = input.value;
       input.addEventListener("change",check)
    }
    
    function check() {
        if(this.value < 0 || this.value > 10) {
            alert("The number must be between 0 - 10");
                value = 0;
            }
        }

        <label for="yourGuess">You choose: </label>
        <input id="yourGuess" type="number" min="0" max="10">

来源：https://stackoverflow.com/questions/47028665/pure-javascript-detect-change-in-number-typed-input-value

标签

javascript

html

dom-events