Restrict characters in input field

Question

Is there a way to block users from writing specific characters in input fields? I tried the code below, but when a user enters disallowed characters, they appear for a brief period before disappearing. I want the input to remain unchanged when invalid characters are written.

I want to use onchange because other restriction methods do not seem to work on mobile devices. The problem I want to solve is that characters appear briefly before being removed.

function checkInput(ob) {
  const invalidChars = /[^0-9]/gi;

  if(invalidChars.test(ob.value)) {
    ob.value = ob.value.replace(invalidChars, "");
  }
};

<input class="input" maxlength="1" onChange="checkInput(this)" onKeyup="checkInput(this)" type="text" autocomplete="off" />

also it should be type="input" not class="input" anyway. (and if you want to style it, use [type="input"]) — mahemoff, Mar 28 '14 at 09:14
@iJay OP doesn't want to hide all characters but remove some of them. — ElmoVanKielmo, Mar 28 '14 at 09:14
Same things does if i set to password and i try to use letters or other characters except numbers. + when is set to password it doesnt show me the number,it does show a bullet — user3459377, Mar 28 '14 at 09:16
The problem is that i have tryed already differet restrict characters code but this one works for tablets too.The only thing is that when i type restricted characters it show em for a second and i need to do not display them at all — user3459377, Mar 28 '14 at 09:19
`maxlength="1"` ? you just want only one character in text box? — CJ Ramki, Mar 28 '14 at 09:20
@CJRamki yes,just 1 character in input fields (6) and ONLY number.Other characters shouldnt be able to appear at all — user3459377, Mar 28 '14 at 09:21
possible duplicate of [Cancel the keydown in HTML](http://stackoverflow.com/questions/3036243/cancel-the-keydown-in-html) — mplungjan, Mar 28 '14 at 09:22
Why dont color your text the same as your background? if there is a delay they wont see it anyway. — Eddie, Mar 28 '14 at 09:24
@UglyEddie i was thinking of doing that but is nasty ..should be an answer with js/jquery code that will do that — user3459377, Mar 28 '14 at 09:25
@user3459377 in what way different. If you intercept the keydown, you will not see the char in the field — mplungjan, Mar 28 '14 at 09:35
@user3459377 Check my answer, I guess this is what you need. — dfsq, Mar 28 '14 at 09:52
Possible duplicate of [HTML5 restricting input characters](https://stackoverflow.com/questions/13607278/html5-restricting-input-characters) — Jo Liss, Feb 25 '19 at 15:15

score 14 · Accepted Answer · edited May 23 '17 at 12:18

14

you can use try this,

$('.input').keyup(function () {
    if (!this.value.match(/[0-9]/)) {
        this.value = this.value.replace(/[^0-9]/g, '');
    }
});

SEE THIS FIDDLE DEMO

Updated :

You can try this Code,

$(document).ready(function() {
    $(".input").keydown(function (e) {
        // Allow: backspace, delete, tab, escape and enter
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) || 
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

SOURCE

SEE UPDATED FIDDLE DEMO

UPDATED FOR ANDROID:

<EditText
android:id="@+id/editText1"
android:inputType="number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_marginTop="58dp"
android:layout_toRightOf="@+id/textView1"
android:maxLength="1" >
</EditText>

I think it may help you... using android:inputType="number" you can do that.

edited May 23 '17 at 12:18

Community

1
1

answered Mar 28 '14 at 09:37

CJ Ramki

2,620
3
25
47

Same delay when i try to use restricted chars in input – user3459377 Mar 28 '14 at 09:42
How did this get two upvotes when it doesn't even work? – Niklas Mar 28 '14 at 09:42
@Niklas If you open the fiddle and type a,b,c,d ... you could see a delay there,letters are shown for a second,try to keep a letter pressed too – user3459377 Mar 28 '14 at 09:45
Yap it does.Thank you CJRamki – user3459377 Mar 28 '14 at 10:13
1 more thing,sholdnt allow . – user3459377 Mar 28 '14 at 10:19
Done,now works great.But do you know if works for android platforms too? – user3459377 Mar 28 '14 at 11:18
Is there a reason you allow the up arrow (38), but not down arrow (40)? I used `e.keyCode >= 35 && e.keyCode <= 40` for my case. – User42 Jan 14 '16 at 08:14
The first snippet does not work with pasting/drag&drop, and the latter does not work with non-QWERTY keyboard layouts. I think it's better to [use the `beforeinput` event to reject invalid inputs beforehand](https://stackoverflow.com/a/74549391). – FWDekker Nov 23 '22 at 15:39

dfsq · Answer 2 · 2016-04-28T09:42:23.350

9

A combination of keypress and paste events does a trick:

var text = document.getElementById('text');
text.onkeypress = text.onpaste = checkInput;

function checkInput(e) {
    var e = e || event;
    var char = e.type == 'keypress' 
        ? String.fromCharCode(e.keyCode || e.which) 
        : (e.clipboardData || window.clipboardData).getData('Text');
    if (/[^\d]/gi.test(char)) {
        return false;
    }
}

<input class="input" maxlength="10" id="text" type="text" autocomplete="off" />

This code prevents from typing or pasting anything but a number. Also no blinking and invalid characters don't show up.

Works in IE7+.

Demo: http://jsfiddle.net/VgtTc/3/

edited Apr 28 '16 at 09:42

answered Mar 28 '14 at 09:36

dfsq

191,768
25
236
258

1

This code does not work with drag&drop, `e.keyCode` and `e.which` are deprecated, and `return false` should probably be `e.preventDefault()`. I think the modern approach is to [handle the `beforeinput` event to reject invalid inputs in a generic way](https://stackoverflow.com/a/74549391/). – FWDekker Nov 23 '22 at 15:45

FWDekker · Answer 3 · 2022-11-23T16:19:53.517

All answers given so far suffer from at least one of the following accessibility issues:

They validate key codes, which does not work with non-QWERTY keyboard layouts.
They do not cover all input methods; especially drag&drop is often forgotten.
They alter the value, which resets the position of the caret.
They use the pattern attribute, but this does not provide feedback until the form is submitted.

Wouldn't it be a much better idea to actually validate the input before it's inserted?

The beforeinput event fires before the input's value is changed. The event has a data property which describes the content that the user wants to add to the input field. In the event handler, you simply check the data attribute, and stop the event chain if it contains disallowed characters.

We end up with the following very simple, very short code.

const input = document.getElementById("input");
const regex = new RegExp("^[0-9]*$");

input.addEventListener("beforeinput", (event) => {
  if (event.data != null && !regex.test(event.data)) 
    event.preventDefault();
});

<label for="input">Enter some digits:</label>
<input id="input" />

Some closing notes:

Accessibility: Provide a clear explanation of what input format is expected from the user. For example, you can use the title attribute of the input to show a tooltip explaining the expected format.
Security: This is client-side validation, and does not guarantee that the pattern is enforced when the form is sent to a server. For that, you'll need server-side validation.

This should be the accepted answer. It doesn't rely on any hacks and correctly intercepts the potential value before it actually changes in the `` element. It also shows how you can use a variable or other object attribute to control the regex of allowed characters. — E-Riz, May 23 '23 at 13:25

score 2 · Answer 4 · answered Mar 28 '14 at 09:28

2

Here's a little hack you could try: DEMO

What it does is that it colors every input text white and then changes it back to black if it suits your requirements. If you could live with the bit of lag that occurs when you enter a valid character.

function checkInput(ob) {
    var invalidChars = /[^0-9]/gi
    if (invalidChars.test(ob.value)) {
        ob.value = ob.value.replace(invalidChars, "");
    }
    else {
        document.getElementById('yourinput').style.color = '#000';
    }
};

function hideInput(ob) {
    document.getElementById('yourinput').style.color = '#FFF';
};

html

<input id="yourinput" class="input" maxlength="1" onKeydown="hideInput(this)" onKeyup="checkInput(this)" type="text" autocomplete="off" />

css

input {color:#FFF;}

answered Mar 28 '14 at 09:28

Niklas

13,005
23
79
119

Aint any way of doing that without useing css? Its just a delay when you press restricted characters that i dont want to be displayed at all – user3459377 Mar 28 '14 at 09:32
Ur answer is good,as you said its a little hack but i still wonder how can i use this code without delay – user3459377 Mar 28 '14 at 09:32
1

Yeah, I'm trying some other things but I can't seem to get rid of the lag. – Niklas Mar 28 '14 at 09:43

score 1 · Answer 5 · edited Mar 28 '14 at 10:09

1

check this code,

$('.input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!(a.indexOf(k)>=0))
        e.preventDefault();
});

edited Mar 28 '14 at 10:09

CJ Ramki

2,620
3
25
47

answered Mar 28 '14 at 09:26

Ashwani Panwar

3,819
3
46
66

score 1 · Answer 6 · answered May 11 '17 at 15:29

1

<input id="testInput"></input>

<script>
testInput.onchange = testInput.oninput = restrict;

function restrict() {
    testInput.value = testInput.value.replace(/[^a-z]/g, "");
}
</script>

I came up with something slightly different. oninput instead of onkeyup/onkeydown, and onchange instead of onpaste.

answered May 11 '17 at 15:29

Nick Bilyk

352
2
8

1

Note that this resets the caret every time an invalid input is entered, which is annoying for the user if they want to edit the start of the input and press the wrong key. [You can use the `beforeinput` event to reject invalid inputs before they're even inserted.](https://stackoverflow.com/a/74549391) – FWDekker Nov 23 '22 at 15:47

score 0 · Answer 7 · answered May 14 '21 at 18:30

I restrict invalid characters on both keypress and paste events like:

<input type="text" onkeydown="validateKey(event)" onpaste="validatePaste(this, event)">

And define functions to handle these events inside tab or a separate javascript file:

<script>
function validateKey(e) {
  switch(e.keyCode) {
    case 8,9,13,37,39:
      break;
    default:
      var regex = /[a-z .'-]/gi;
      var key = e.key;
      if(!regex.test(key)) {
        e.preventDefault();
        return false;
      }
      break;
  }
}
function validatePaste(el, e) {
  var regex = /^[a-z .'-]+$/gi;
  var key = e.clipboardData.getData('text')
  if (!regex.test(key)) {
    e.preventDefault();
    return false;
  }
}
</script>

Restrict characters in input field

7 Answers7

Demo: http://jsfiddle.net/VgtTc/3/

Linked