CODEWITHSUNDEEP
javascripthtml
Costa Michailidis
Costa Michailidis

Reputation: 8178

limiting input field (type=number) to 1 to 20

I have an input field:

    <input id="thing" type='number' placeholder='Up to 20 tickets' min='1' max='20' name='tickets'>

And despite the fact that I've listed min and max numbers, it still accepts typing random letters into the field, and such.

I'd like to only allow numbers 1 to 20 to appear in the field upon user input of any kind. How might I do that?

'input' DOM event? some HTML form magic?

Update Haaa, okay, so dynamically created form inputs don't function like normal inputs. The value fields aren't hooked up to user actions.

Upvotes: 0

Views: 4238

Answers (4)

Ananth A
Ananth A

Reputation: 331

You can use Plain Javascript.

<script>


function handleChange(input) {
    if ((input.value < 0) || (input.value > 20)) return false;
  }

</script>

HTMl code

<input type="number" onchange="handleChange(this);" />

Or you can use this

<input type="number" onKeyPress="if((this.value < 0) || (this.value > 20)) return false;" />

Upvotes: 0

Ralf
Ralf

Reputation: 729

My version, used for quantity inputs in a shop allowing only numbers and max 2 digits:

const qinputs = document.querySelectorAll('input.quantity-input');
const allowedkeys = ["Backspace", "Delete", "ArrowLeft", "ArrowRight"];

qinputs.forEach(qinput => {
 qinput.addEventListener('keydown', function handleClick(event) {
     pressedKey = event['key'];
     if (!allowedkeys.includes(pressedKey) && (isNaN(pressedKey) || (this.value.length > 1))) {
         event.preventDefault();
     }
 });
});
<input type="text" class="quantity-input" value="1">

There is just one problem with this: You cannot select and overwrite values. Only delete and write again. A possible solution would be to allow all entries and then have the script correct the value afterwards (onkeyup, maybe).

Upvotes: 0

Costa Michailidis
Costa Michailidis

Reputation: 8178

I ended up doing this:

var temp = ''
input.addEventListener('input', function (event) {
  if (this.value == '') return
  if (this.value < 1 || this.value > 20 || this.value.match(/\D/)) return this.value = temp
  temp = this.value
}, false)

The input event is the most broad. It captures copy pastes, and all other manner of changing field values.

The check for empty string is important, because if some one has typed 15, and changes their mind, and wants to type 20, they'll need to backspace twice, before typing the 2 and the 0. So, the state of empty is valid.

Anytime the function runs it stores the new value in a temp var, and we apply that immediately if we get input we don't like, because preventDefault() doesn't work with the input event.

Upvotes: 0

Przemek K.
Przemek K.

Reputation: 75

Never trust user's input. Limiting values in html input is only for user's convenience. Even if you somehow limited user's ability to change input value directly, he could still press f12 (in Chrome), and manually change values to whatever he wants.

That being said, your code works just fine, and does what you want it to do- it limits user to input just numbers, between 1 and 20. Before doing anything with this data though, you have to validate it on the server, so server will make sure if it's really a number, and it's really between 1 and 20, because as I said- there's no way to prevent user from entering literally anything he wants into inputs.

Upvotes: 1

Related Questions