How do I block or restrict special characters from input fields with jquery?

Viewed 449208

How do I block special characters from being typed into an input field with jquery?

24 Answers

Use simple onkeypress event inline.

 <input type="text" name="count"  onkeypress="return /[0-9a-zA-Z]/i.test(event.key)">

Take a look at the jQuery alphanumeric plugin. https://github.com/KevinSheedy/jquery.alphanum

//All of these are from their demo page
//only numbers and alpha characters
$('.sample1').alphanumeric();
//only numeric
$('.sample4').numeric();
//only numeric and the .
$('.sample5').numeric({allow:"."});
//all alphanumeric except the . 1 and a
$('.sample6').alphanumeric({ichars:'.1a'});

this is an example that prevent the user from typing the character "a"

$(function() {
$('input:text').keydown(function(e) {
if(e.keyCode==65)
    return false;

});
});

key codes refrence here:
http://www.expandinghead.net/keycode.html

I use this code modifying others that I saw. Only grand to the user write if the key pressed or pasted text pass the pattern test (match) (this example is a text input that only allows 8 digits)

$("input").on("keypress paste", function(e){
    var c = this.selectionStart, v = $(this).val();
    if (e.type == "keypress")
        var key = String.fromCharCode(!e.charCode ? e.which : e.charCode)
    else
        var key = e.originalEvent.clipboardData.getData('Text')
    var val = v.substr(0, c) + key + v.substr(c, v.length)
    if (!val.match(/\d{0,8}/) || val.match(/\d{0,8}/).toString() != val) {
        e.preventDefault()
        return false
    }
})
$(function(){
      $('input').keyup(function(){
        var input_val = $(this).val();
        var inputRGEX = /^[a-zA-Z0-9]*$/;
        var inputResult = inputRGEX.test(input_val);
          if(!(inputResult))
          {     
            this.value = this.value.replace(/[^a-z0-9\s]/gi, '');
          }
       });
    });

You don't need jQuery for this action

You can achieve this using plain JavaScript, You can put this in the onKeyUp event.

Restrict - Special Characters

e.target.value = e.target.value.replace(/[^\w]|_/g, '').toLowerCase()

Accept - Number only

e.target.value = e.target.value.replace(/[^0-9]/g, '').toLowerCase()

Accept - Small Alphabet only

e.target.value = e.target.value.replace(/[^0-9]/g, '').toLowerCase()

I could write for some more scenarios but I have to maintain the specific answer.

Note It will work with jquery, react, angular, and so on.

 $(this).val($(this).val().replace(/[^0-9\.]/g,''));
    if( $(this).val().indexOf('.') == 0){

        $(this).val("");

    }

//this is the simplest way

indexof is used to validate if the input started with "."

Allow only numbers in TextBox (Restrict Alphabets and Special Characters)

        /*code: 48-57 Numbers
          8  - Backspace,
          35 - home key, 36 - End key
          37-40: Arrow keys, 46 - Delete key*/
        function restrictAlphabets(e){
            var x=e.which||e.keycode;
            if((x>=48 && x<=57) || x==8 ||
                (x>=35 && x<=40)|| x==46)
                return true;
            else
                return false;
        }
/**
     * Forbids special characters and decimals
     * Allows numbers only
     * */
    const numbersOnly = (evt) => {

        let charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode === 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }

        let inputResult = /^[0-9]*$/.test(evt.target.value);
        if (!inputResult) {
            evt.target.value = evt.target.value.replace(/[^a-z0-9\s]/gi, '');
        }

        return true;
    }

In HTML:

<input type="text" (keypress)="omitSpecialChar($event)"/>

In JS:

omitSpecialChar(event) {
    const keyPressed = String.fromCharCode(event.keyCode);
    const verifyKeyPressed = /^[a-zA-Z\' \u00C0-\u00FF]*$/.test(keyPressed);
    return verifyKeyPressed === true;
}

In this example it is possible to type accents.

$(document).ready(function() {
    $('#Description').bind('input', function() {
        var c = this.selectionStart,
            r = /[^a-z0-9 .]/gi,
            v = $(this).val();
        if (r.test(v)) {
            $(this).val(v.replace(r, ''));
            c--;
        }
        this.setSelectionRange(c, c);
        if (!(checkEmpty($("#Description").val()))) {
            $("#Description").val("");
        } //1Apr2022 code end
    });
    $('#Description').on('change', function() {
        if (!(checkEmpty($("#Description").val()))) {
            $("#Description").val("");
        } //1Apr2022 code end
    });
});

function checkEmpty(field) { //1Apr2022 new code 
    if (field == "" ||
        field == null ||
        field == "undefinied") {

        return false;
    } else if (/^\s*$/.test(field)) {
        return false;
    } else {
        return true;
    }
}
Related