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

Question

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

User · Answer

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

User · Answer

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 amp 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

User · Answer

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  gt  31  amp  amp   charCode  lt  48    charCode  gt  57   amp  amp  charCode    42          return false      return true    function isNumberKey evt        var charCode    evt which    evt which   event keyCode     if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57           return false      return true    function isNumberKeyForAmount evt        var charCode    evt which    evt which   event keyCode     if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57   amp  amp  charCode    46          return false      return true

User · Answer

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 gt  48  amp  amp  x lt  57     x  8                     x gt  35  amp  amp  x lt  40    x  46                  return true              else                 return false

User · Answer

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   lt input only-num type  text  maxlength  10  id  amount  placeholder   XXXX XX     autocomplete  off  ng-model  vm amount  ng-change  vm updateRequest    gt    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  amp  amp  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

User · Answer

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

User · Answer

Forbids special characters and decimals        Allows numbers only               const numbersOnly    evt    gt             let charCode    evt which    evt which   evt keyCode          if  charCode     46  amp  amp  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  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

User · Answer

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

User · Answer

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

User · Answer

Yes you can do by using jQuery as    lt script gt    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                                                           lt  script gt   lt input type  text  id  username  name  username   gt  lt span id  msgbox  style  display none  gt  lt  span gt    and script for your user availability php will be    lt  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            amp           gt  lt  gt        -      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             gt    I tried to add for   and   but not succeeded     You can also do it by using javascript  amp  code will be    lt  -- Check special characters in username start -- gt   lt script language  javascript  type  text javascript  gt  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     amp      keychar          keychar          keychar          keychar    -     keychar          keychar          keychar          keychar          keychar          keychar     lt      keychar     gt      keychar          keychar          keychar          keychar          keychar          keychar          keychar          keychar          keychar          keychar           keychar           keychar          keychar                   return false        else           return true           lt  script gt   lt  -- Check special characters in username end -- gt    lt  -- in your form -- gt      User id    lt input type  text  id  txtname  name  txtname  onkeypress  return check event    gt

User · Answer

just the numbers         input time   keydown function e      if e keyCode  48  amp  amp    e keyCode lt  57            return true        else           return false             or for time including            input time   keydown function e      if e keyCode  48  amp  amp    e keyCode lt  58            return true        else           return false             also including delete and backspace         input time   keydown function e          if  e keyCode  46  amp  amp    e keyCode lt  58     e keyCode  8                    return true                 else                      return false                      unfortuneatly not getting it to work on a iMAC

User · Answer

Your textbox       lt input type  text  id  name  gt    Your javascript       name   keypress function event        var character   String fromCharCode event keyCode       return isValid character             function isValid str        return              amp       -                  lt  gt     g test str

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

In HTML   lt input type  quot text quot   keypress   quot omitSpecialChar  event  quot   gt   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

User · Answer

Use HTML5 s pattern input attribute     lt input type  text  pattern    a-zA-Z0-9       gt

User · Answer

Use simple onkeypress event inline   x000D   x000D    lt input type  text  name  count   onkeypress  return   0-9a-zA-Z  i test event key   gt  x000D   x000D   x000D

User · Answer

User below code to restrict special character also        h txtAmount  keydown function  event            if  event shiftKey                event preventDefault                      if  event keyCode    46    event keyCode    8                      else               if  event keyCode  lt  95                    if  event keyCode  lt  48    event keyCode  gt  57                        event preventDefault                                                else                   if  event keyCode  lt  96    event keyCode  gt  105                        event preventDefault

User · Answer

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

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

Examples related to jquery

Examples related to special-characters

Examples related to alphanumeric