17

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" />

20
  • 3
    why not set type='password'....
    – iJade
    Mar 28, 2014 at 9:13
  • 1
    also it should be type="input" not class="input" anyway. (and if you want to style it, use [type="input"])
    – mahemoff
    Mar 28, 2014 at 9:14
  • 1
    You could use html5 "pattern" attribute to enforce a regex
    – mahemoff
    Mar 28, 2014 at 9:15
  • 1
    just call function on "onkeypress" event Mar 28, 2014 at 9:18
  • 1
    possible duplicate of Cancel the keydown in HTML
    – mplungjan
    Mar 28, 2014 at 9:22

7 Answers 7

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.

8
  • Same delay when i try to use restricted chars in input Mar 28, 2014 at 9:42
  • How did this get two upvotes when it doesn't even work?
    – Niklas
    Mar 28, 2014 at 9: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 Mar 28, 2014 at 9:45
  • Yap it does.Thank you CJRamki Mar 28, 2014 at 10:13
  • 1 more thing,sholdnt allow . Mar 28, 2014 at 10:19
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/

1
5

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

  1. They validate key codes, which does not work with non-QWERTY keyboard layouts.
  2. They do not cover all input methods; especially drag&drop is often forgotten.
  3. They alter the value, which resets the position of the caret.
  4. 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.
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;}
3
  • 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 Mar 28, 2014 at 9:32
  • Ur answer is good,as you said its a little hack but i still wonder how can i use this code without delay Mar 28, 2014 at 9:32
  • 1
    Yeah, I'm trying some other things but I can't seem to get rid of the lag.
    – Niklas
    Mar 28, 2014 at 9:43
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();
});

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.

1
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.