CODEWITHSUNDEEP
jqueryspecial-charactersalphanumeric
Nerd Stalker
Nerd Stalker

Reputation: 1529

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

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

Upvotes: 152

Views: 552475

Answers (27)

Omer Khan Jadoon
Omer Khan Jadoon

Reputation: 1

A more enhanced form would be:

$('input[type=text]').on('input', function() {
    var c = this.selectionStart,
        r = /[^a-z ]/gi,
        v = $(this).val();
    if (r.test(v)) {
        $(this).val(v.replace(r, ''));
        c--;
    }
    this.setSelectionRange(c, c);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Because it will allow you to enter space as well and it will only target the input fields with type text and wont bother the other input fields like email, password etc as normally we need special characters in email and password field

Upvotes: 0

Govind Pant
Govind Pant

Reputation: 11

Use below code to also restrict special characters

$(h.txtAmount).keydown(function (event) {
    if (event.shiftKey) {
        event.preventDefault();
    }
    if (event.keyCode == 46 || event.keyCode == 8) {
    }
    else {
        if (event.keyCode < 95) {
            if (event.keyCode < 48 || event.keyCode > 57) {
                event.preventDefault();
            }
        }
        else {
            if (event.keyCode < 96 || event.keyCode > 105) {
                event.preventDefault();
            }
        }
    }
});

Upvotes: 1

user3354817
user3354817

Reputation: 319

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;
    return (x >= 48 && x <= 57) || x == 8 ||
        (x >= 35 && x <= 40) || x == 46;
}

Upvotes: 1

Pushpak
Pushpak

Reputation: 408

$(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 .

Upvotes: 2

Jonathan Joosten
Jonathan Joosten

Reputation: 1509

Just the numbers:

$('input.time').keydown(function(e) {
    return e.keyCode >= 48 && e.keyCode <= 57);
});

For time including : replace 57 with 58. To also include delete and backspace:

return (e.keyCode >= 46 && e.keyCode <= 58) || e.keyCode == 8;

Upvotes: 2

Jacobski
Jacobski

Reputation: 771

Here's my one-liner approach...

<input type="text" onkeyup="this.value = this.value.replace(/[^0-9a-zA-Z \-]/g, '');">

It can handle key presses, copy-pasting and clicks from auto-complete suggestions. There's a momentary appearance of the special characters but will disappear immediately.

Upvotes: 0

Sagar Ambade
Sagar Ambade

Reputation: 53

Try this JavaScript Code it's a simple way to restrict special characters from the input.

Source code: Restrict special characters

$('input').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);
});

Upvotes: 0

AYUSH CHAUDHARY
AYUSH CHAUDHARY

Reputation: 55

$(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;
    }
}

Upvotes: 0

Hidayt Rahman
Hidayt Rahman

Reputation: 2678

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.

Upvotes: 3

MOhammad.Isaac.Ahmadi
MOhammad.Isaac.Ahmadi

Reputation: 379

Use simple onkeypress event inline.

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

Upvotes: 32

Douglas Soldan
Douglas Soldan

Reputation: 51

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.

Upvotes: 1

Christian Dominguez
Christian Dominguez

Reputation: 157

/**
     * 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;
    }

Upvotes: 1

Ranjith Rana
Ranjith Rana

Reputation: 164

$(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, '');
          }
       });
    });

Upvotes: 5

RSolberg
RSolberg

Reputation: 26972

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'});

Upvotes: 13

Pablo Padron
Pablo Padron

Reputation: 61

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
    }
})

Upvotes: 6

chandler
chandler

Reputation: 1150

Your textbox: 

<input type="text" id="name">

Your javascript:

$("#name").keypress(function(event) {
    var character = String.fromCharCode(event.keyCode);
    return isValid(character);     
});

function isValid(str) {
    return !/[~`!@#$%\^&*()+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
}

Upvotes: 15

rexmac
rexmac

Reputation: 1624

I was looking for an answer that restricted input to only alphanumeric characters, but still allowed for the use of control characters (e.g., backspace, delete, tab) and copy+paste. None of the provided answers that I tried satisfied all of these requirements, so I came up with the following using the input event.

$('input').on('input', function() {
  $(this).val($(this).val().replace(/[^a-z0-9]/gi, ''));
});

Edit:
As rinogo pointed out in the comments, the above code snippet forces the cursor to the end of the input when typing in the middle of the input text. I believe the code snippet below solves this problem.

$('input').on('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);
});

Upvotes: 92

Dale
Dale

Reputation: 2155

A simple example using a regular expression which you could change to allow/disallow whatever you like.

$('input').on('keypress', function (event) {
    var regex = new RegExp("^[a-zA-Z0-9]+$");
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
       event.preventDefault();
       return false;
    }
});

Upvotes: 156

GirishBabuC
GirishBabuC

Reputation: 1379

To replace special characters, space and convert to lower case

$(document).ready(function (){
  $(document).on("keyup", "#Id", function () {
  $("#Id").val($("#Id").val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '').toLowerCase());
 }); 
});

Upvotes: 3

Ivor Scott
Ivor Scott

Reputation: 179

Restrict specials characters on keypress. Here's a test page for key codes: http://www.asquare.net/javascript/tests/KeyCode.html

var specialChars = [62,33,36,64,35,37,94,38,42,40,41];

some_element.bind("keypress", function(event) {
// prevent if in array
   if($.inArray(event.which,specialChars) != -1) {
       event.preventDefault();
   }
});

In Angular, I needed a proper currency format in my textfield. My solution:

var angularApp = angular.module('Application', []);

...

// new angular directive
angularApp.directive('onlyNum', function() {
    return function( scope, element, attrs) {

        var specialChars = [62,33,36,64,35,37,94,38,42,40,41];

        // prevent these special characters
        element.bind("keypress", function(event) {
            if($.inArray(event.which,specialChars) != -1) {
                prevent( scope, event, attrs)
             }
        });

        var allowableKeys = [8,9,37,39,46,48,49,50,51,52,53,54,55,56
            ,57,96,97,98,99,100,101,102,103,104,105,110,190];

        element.bind("keydown", function(event) {
            if($.inArray(event.which,allowableKeys) == -1) {
                prevent( scope, event, attrs)
            }
        });
    };
})

// scope.$apply makes angular aware of your changes
function prevent( scope, event, attrs) {
    scope.$apply(function(){
        scope.$eval(attrs.onlyNum);
        event.preventDefault();
    });
    event.preventDefault();
}

In the html add the directive

<input only-num type="text" maxlength="10" id="amount" placeholder="$XXXX.XX"
   autocomplete="off" ng-model="vm.amount" ng-change="vm.updateRequest()">

and in the corresponding angular controller I only allow there to be only 1 period, convert text to number and add number rounding on 'blur'

...

this.updateRequest = function() {
    amount = $scope.amount;
    if (amount != undefined) {
        document.getElementById('spcf').onkeypress = function (e) {
        // only allow one period in currency
        if (e.keyCode === 46 && this.value.split('.').length === 2) {
            return false;
        }
    }
    // Remove "." When Last Character and round the number on blur
    $("#amount").on("blur", function() {
      if (this.value.charAt(this.value.length-1) == ".") {
          this.value.replace(".","");
          $("#amount").val(this.value);
      }
      var num = parseFloat(this.value);
      // check for 'NaN' if its safe continue
      if (!isNaN(num)) {
        var num = (Math.round(parseFloat(this.value) * 100) / 100).toFixed(2);
        $("#amount").val(num);
      }
    });
    this.data.amountRequested = Math.round(parseFloat(amount) * 100) / 100;
}

...

Upvotes: 2

James Mart
James Mart

Reputation: 640

Use regex to allow/disallow anything. Also, for a slightly more robust version than the accepted answer, allowing characters that don't have a key value associated with them (backspace, tab, arrow keys, delete, etc.) can be done by first passing through the keypress event and check the key based on keycode instead of value.

$('#input').bind('keydown', function (event) {
        switch (event.keyCode) {
            case 8:  // Backspace
            case 9:  // Tab
            case 13: // Enter
            case 37: // Left
            case 38: // Up
            case 39: // Right
            case 40: // Down
            break;
            default:
            var regex = new RegExp("^[a-zA-Z0-9.,/ $@()]+$");
            var key = event.key;
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
            break;
        }
});

Upvotes: 19

keepitreal
keepitreal

Reputation: 567

Use HTML5's pattern input attribute! 

<input type="text" pattern="^[a-zA-Z0-9]+$" />

Upvotes: 21

Pratik 1020
Pratik 1020

Reputation: 313

Write some javascript code on onkeypress event of textbox. as per requirement allow and restrict character in your textbox

function isNumberKeyWithStar(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 42)
        return false;
    return true;
}
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
function isNumberKeyForAmount(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46)
        return false;
    return true;
}

Upvotes: 4

KevSheedy
KevSheedy

Reputation: 3265

Short answer: prevent the 'keypress' event:

$("input").keypress(function(e){
    var charCode = !e.charCode ? e.which : e.charCode;

    if(/* Test for special character */ )
        e.preventDefault();
})

Long answer: Use a plugin like jquery.alphanum

There are several things to consider when picking a solution:

  • Pasted text
  • Control characters like backspace or F5 may be prevented by the above code.
  • é, í, ä etc
  • Arabic or Chinese...
  • Cross Browser compatibility

I think this area is complex enough to warrant using a 3rd party plugin. I tried out several of the available plugins but found some problems with each of them so I went ahead and wrote jquery.alphanum. The code looks like this:

$("input").alphanum();

Or for more fine-grained control, add some settings:

$("#username").alphanum({
    allow      : "€$£",
    disallow   : "xyz",
    allowUpper : false
});

Hope it helps.

Upvotes: 57

hyphan
hyphan

Reputation: 199

Wanted to comment on Alex's comment to Dale's answer. Not possible (first need how much "rep"? That wont happen very soon.. strange system.) So as an answer:

Backspace can be added by adding \b to the regex definition like this: [a-zA-Z0-9\b]. Or you simply allow the whole Latin range, including more or less anything "non exotic" characters (also control chars like backspace): ^[\u0000-\u024F\u20AC]+$

Only real unicode char outside latin there is the euro sign (20ac), add whatever you may need else.

To also handle input entered via copy&paste, simply also bind to the "change" event and check the input there too - deleting it or striping it / giving an error message like "not supported characters"..

if (!regex.test($j(this).val())) {
  alert('your input contained not supported characters');
  $j(this).val('');
  return false;
}

Upvotes: 2

PHP Ferrari
PHP Ferrari

Reputation: 15616

Yes you can do by using jQuery as:

<script>
$(document).ready(function()
{
    $("#username").blur(function()
    {
        //remove all the class add the messagebox classes and start fading
        $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
        //check the username exists or not from ajax
        $.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
        {
          if(data=='empty') // if username is empty
          {
            $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('Empty user id is not allowed').addClass('messageboxerror').fadeTo(900,1);
            });
          }
          else if(data=='invalid') // if special characters used in username
          {
            $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('Sorry, only letters (a-z), numbers (0-9), and periods (.) are allowed.').addClass('messageboxerror').fadeTo(900,1);
            });
          }
          else if(data=='no') // if username not avaiable
          {
            $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('User id already exists').addClass('messageboxerror').fadeTo(900,1);
            });     
          }
          else
          {
            $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
            { 
              //add message and change the class of the box and start fading
              $(this).html('User id available to register').addClass('messageboxok').fadeTo(900,1); 
            });
          }

        });

    });
});
</script>
<input type="text" id="username" name="username"/><span id="msgbox" style="display:none"></span>

and script for your user_availability.php will be:

<?php
include'includes/config.php';

//value got from the get method
$user_name = trim($_POST['user_name']);

if($user_name == ''){
    echo "empty";
}elseif(preg_match('/[\'^£$%&*()}{@#~?><>,|=_+¬-]/', $user_name)){
    echo "invalid";
}else{
    $select = mysql_query("SELECT user_id FROM staff");

    $i=0;
    //this varible contains the array of existing users
    while($fetch = mysql_fetch_array($select)){
        $existing_users[$i] = $fetch['user_id'];
        $i++;
    }

    //checking weather user exists or not in $existing_users array
    if (in_array($user_name, $existing_users))
    {
        //user name is not availble
        echo "no";
    } 
    else
    {
        //user name is available
        echo "yes";
    }
}
?>

I tried to add for / and \ but not succeeded.

You can also do it by using javascript & code will be:

<!-- Check special characters in username start -->
<script language="javascript" type="text/javascript">
function check(e) {
    var keynum
    var keychar
    var numcheck
    // For Internet Explorer
    if (window.event) {
        keynum = e.keyCode;
    }
    // For Netscape/Firefox/Opera
    else if (e.which) {
        keynum = e.which;
    }
    keychar = String.fromCharCode(keynum);
    //List of special characters you want to restrict
    if (keychar == "'" || keychar == "`" || keychar =="!" || keychar =="@" || keychar =="#" || keychar =="$" || keychar =="%" || keychar =="^" || keychar =="&" || keychar =="*" || keychar =="(" || keychar ==")" || keychar =="-" || keychar =="_" || keychar =="+" || keychar =="=" || keychar =="/" || keychar =="~" || keychar =="<" || keychar ==">" || keychar =="," || keychar ==";" || keychar ==":" || keychar =="|" || keychar =="?" || keychar =="{" || keychar =="}" || keychar =="[" || keychar =="]" || keychar =="¬" || keychar =="£" || keychar =='"' || keychar =="\\") {
        return false;
    } else {
        return true;
    }
}
</script>
<!-- Check special characters in username end -->

<!-- in your form -->
    User id : <input type="text" id="txtname" name="txtname" onkeypress="return check(event)"/>

Upvotes: 2

user434917
user434917

Reputation:

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

Upvotes: 6

Related Questions