How to set the only possible values in an input text

Question

I have an input text form where it's required to insert a value from 1 to 10.

I tried to put a mask to customize it but it makes me write values over 10, how do I set the only possible values to be from 1 to 10 and not less or more?

The form input type="text" name="level" id="level"

The mask I used to make it accept only numbers and to make it 2 digits long

function maskFormatterForLvl(val) {
$(val).mask("ZZ", {
    translation: {
        'Z': {
            pattern: /[0-9]/,
            optional: true
        }
    }
});

};

I tried with the "max" attribute but it didn't work, probably because I'm new to JavaScript

why don't you use input number field in html5 ? – melvin May 30 '18 at 12:54 — melvin, May 30 '18 at 12:54
It have to be a text type, isn't it possible? – user9869431 May 30 '18 at 12:58 — user9869431, May 30 '18 at 12:58
you can hide the arrows. Check updated part in my answer – melvin May 30 '18 at 13:11 — melvin, May 30 '18 at 13:11

melvin · Answer 1 · 2018-05-30T13:10:48.140

2

If your input field values are numbers, then you can use input type 'number' . The min and max attributes represents number range to input. Hope this is much simpler.

<input type="number" min="0" max="10">

UPDATE

Inorder to hide the arrows you could use the following.

/* Webkit browsers like Safari and Chrome */
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0; 
    }
/* For Firefox */
    input[type='number'] {
       -moz-appearance:textfield;
    }

edited May 30 '18 at 13:10

answered May 30 '18 at 12:55

melvin

2,571
1
14
37

It must be type="text", because of the arrows shown in the number type, isn't it possible to have the same for the text type? thanks!! – user9869431 May 30 '18 at 12:57
if you like to use css, then you can hide those arrows.@user9869431 – melvin May 30 '18 at 13:05
turns out the input type number only works with min and max when you increment with the arrows. if you type numbers, it will accept everything. You can even copy/paste text into it ( but you cannot write text ) . So, without some js validation, it won't work – Mihai T May 30 '18 at 13:14
Thanks!! It solved the problems with the arrows but it's still possible to write numbers higher than 10!!! – user9869431 May 30 '18 at 13:16
is that so ? i haven't thought about it. Good work. @MihaiT – melvin May 30 '18 at 13:16
@MihaiT what kind of validation? – user9869431 May 30 '18 at 13:17
@user9869431 you can see in my answer above – Mihai T May 30 '18 at 13:50

score 0 · Answer 2 · answered May 30 '18 at 13:00

0

You can use this regex if you have to use type="text"

<input type="text" pattern="([0-9])|(10)">

answered May 30 '18 at 13:00

Crackers

1,097
6
14

Mihai T · Answer 3 · 2018-05-30T14:29:12.133

You can use a text input and allow only numbers to be typed in, with the use of charCode . From 48 to 57 are the keyboard numbers from 0-9.

If it passes this validation then you check if it exceedes the max value of your input.

For the min value, the user cannot enter something below 0 because to do that he should be able to write -, which doesn't pass the first condition ( numbers only )

const input = document.getElementById('level')
input.onkeypress =  function(e) {
    var ev = e || window.event;
    if (ev.charCode < 48 || ev.charCode > 57) {
      return false;
    } else if (this.value * 10 + ev.charCode - 48 > this.max) {

      return false;
      } else if (this.value * 10 + ev.charCode - 48 < this.min) {

      return false;
    } else {
      return true;
    }
  }

<input type="text" name="level" id="level" min="1" max="10" maxlength="2">

Thank you!! But what if I don't want the 0 too? – user9869431 May 30 '18 at 14:13 — user9869431, May 30 '18 at 14:13

How to set the only possible values in an input text

3 Answers3