input text allow only 3 specific characters

Question

Given a text-field that accepts only one character for input, as follows:

<input type="text" maxlength="1" name="k1" placeholder="?" />

Is it possible to further restrict text input so that only a 1, X or 2 (like in a betting-system) validates?

Can you guide me? Or maybe tell me what to search for, because I have tried for days now :) — Daniel Jensen, Apr 19 '17 at 06:54
Check this http://stackoverflow.com/questions/22086823/limit-number-of-characters-in-input-type-number — Harikrishnan N, Apr 19 '17 at 06:55

score 7 · Accepted Answer · answered Apr 19 '17 at 06:55

<input type="text" max-length="1" name="k1" placeholder="?" pattern="[ABC]" />

will allow letters A, B and C. You can replace A,B and C with anything you want

Browser support: http://caniuse.com/#feat=input-pattern

Regex Guide: https://msdn.microsoft.com/en-us/library/az24scfc(v=vs.110).aspx

score 0 · Answer 2 · answered Apr 19 '17 at 07:00

For allowing 1 2 and X , Here

pattern="[12X]" mean either 1, 2 or X

Note: Only <input type="text" max-length="1" name="k1" pattern="[12X]" />This will not work until unless you have a form and you submit. This will allow you put any character in input box. This will come in effect when user submit.

<form>
    <input type="text" max-length="1" name="k1" pattern="[12X]" />
    <input type="submit">
</form>

slevy1 · Answer 3 · 2017-04-19T20:23:29.757

There are at least two ways to do this, one involves using the pattern attribute, a non-JavaScript solution, that certainly works; see solutions others provide below. But, if you need to really be more restrictive, here is a JavaScript solution that stops the user in their tracks from submitting invalid data.

HTML:

<form>
<label>Enter 1, 2, or x</label>
<input id="myinput" maxlength="1" type="text">
<input type="submit"><input type="reset">
</form>

JavaScript:

myinput.oninput = function() {
  if (myinput.value != 1 && myinput.value != 2 && myinput.value != 'x') {
    alert("Invalid: " + myinput.value);
  }
};

Full working example here

A good resource that explores the oninput and other events: https://javascript.info/events-change-input

input text allow only 3 specific characters

3 Answers3