JavaScript input type number check if input is a Number-CodePudding

Hey guys trying that I can just enter numbers with my keyboard into an html number field from 1-100.

I took the function from here HTML number input min and max not working properly and it worked properly for numbers between 1-100.

But I can still enter letters and I don't know how to solve it. I tried adding

if (typeof (parseInt(el.value)) != 'number') {
     el.value = el.min;
}

But it is not working. Here is my whole code:

const enforceMinMax = (el) => {
    if (el.value != "") {
        
        if (parseInt(el.value) < parseInt(el.min)) {
            el.value = el.min;
        }
        if (parseInt(el.value) > parseInt(el.max)) {
            el.value = el.max;
        }
        if (typeof (parseInt(el.value)) != 'number') {
            el.value = el.min;
        }
    }
}

<input type="number" id="quantity" name="quantity" min="1" max="100" step="1" onkeyup=enforceMinMax(this) ><br /><br />

How can I stop entering letters with my keyboard in a html number field?

CodePudding user response：

You could apply this same logic to every numeric input that has a min & max attribute like so:

// find all numeric inputs that have both min & max attributes
// and apply the event handler to each.

document.querySelectorAll('input[type="number"][min][max]').forEach(
  input => input.addEventListener('keyup', function(e) {
    // if the value is numeric proceed - test the numeric value of the input against the min/max attribute values.
    if( !isNaN( Number( this.value ) ) ) {
        if( Number( this.value ) > this.max )this.value=this.max;
        if( Number( this.value ) < this.min )this.value=this.min;
        return true;
      }
      e.preventDefault();
      return false;
    })
);

<input type="number" name="quantity" min="1" max="100" step="1" />

CodePudding user response：

You can compare keyCode and return false if key is not a number, then on key up you can validate min and max value, accordingly modify value of input

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script>
      function handleKeyDown(e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
          e.preventDefault();
          return false;
        }
      }
      function handleKeyUp(e) {
        const v = e?.target?.value || 0;
        if (parseInt(v) === NaN || parseInt(v) < 1) {
          e.target.value = 1;
        } else if (parseInt(v) > 100) {
          e.target.value = 100;
        }
      }
    </script>
  </head>

  <body>
    <input
      type="number"
      min="1"
      max="100"
      onkeydown="handleKeyDown(event)"
      onkeyup="handleKeyUp(event)"
    />
  </body>
</html>