JavaScript输入类型编号限制为值1和2

Question

Probably done with JavaScript.

See this Example from W3Schools

<input type="number"  size="2" min="1" max="2">

Even with the Min and Max values set, you can still type in whatever number you want and it will accept that value. How do I restrict the user in this case so they can only enter 1 or 2, if they enter something different then it sends an alert and clears the field so the user can try again.

Answer 1

Without using JS, you can set the pattern attribute of the input field so the user knows at least that what he/she put in is invalid. This will not clear the field however.

DEMO

HTML

<input type="number" size="2" min="1" max="2" pattern="[12]">

CSS

input:invalid { color:red; border:2px solid red; }

Answer 2

For simplicity's sake, I'm adding an id to your input:

<input type="number" id="myInput" size="2" min="1" max="2">

Then we can simply add an event listener:

document.querySelector('#myInput').addEventListener('input', function(e) {
  if (e.target.value !== '1' && e.target.value !== '2') {
    alert('Invalid number!');
    e.target.value = '';
    e.preventDefault();
  }
});

JSFiddle example

Keep in mind, it's rather jarring UX to use alert , I'm only using it here for an example. Instead, you may want to add an error class to the element or pop up a modal.

Answer 3

If you don't mind having a standard error message on invalid input, you can also use:

<input type="text" pattern="[1-2]">

Edit: If you add a "title" attribute to the input, you can set the error message you want.

Answer 4

The example is using the HTML 5 input type number , which not all browsers support consistently.

You could limit this range using JavaScript, perhaps using jQuery. This is definitely an improvement over the code above, but in truth in a real-world application you accomplish this by using a framework component like AngularJS , Knockout , or jQuery Validator . Using a framework like this will allow you to manage all of your validation in a central location and implement more complex logic involving multiple properties, such as "Value two must be greater than value one".

Answer 5

You can use jQuery and checkValidity() method of the input:

$('[name=points]').bind('keyup',function(){
  if (!$(this).get(0).checkValidity()) {
    $(this).val('');
  }
});

checkValidity() will only work in modern browsers.

Demo: http://www.bootply.com/125666

Answer 6

This is how <input type=number> is expected to work: it does not physically prevent the user from entering arbitrary data (well, it might, but it need not), but the control does not satisfy constraints upon form submission, if it does not match the requirements.

If you want to let the user select between two alternatives only, use a checkbox, or two radio buttons, or a select element with two options. The details depend on whether this should be an obligatory choice or optional and whether there is a default value.

PS W3schools.com is bogus, in this issue, too. The example you link to (which is different from your code) is not strictly incorrect, just illogical and misleading.