152

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

1

27 Answers 27

155

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;
    }
});
6
  • 62
    This doesn't work for pasted text & may also prevent the user from non-text keypresses like backspace, arrow keys, etc.
    – bendytree
    Commented Jul 2, 2012 at 17:41
  • 12
    This won't allow backspace in firefox
    – Alex
    Commented Jan 8, 2013 at 13:06
  • 1
    Does not work for spanish words like: avión (plane), árbol (tree), etc.
    – nikoskip
    Commented Jan 20, 2015 at 18:31
  • 1
    It doesn't works in latest firefox brower, but working fine in chrome
    – Phoenix
    Commented Dec 31, 2018 at 11:57
  • 3
    This solution works for me on a Bootstrap-TagsInput element. To address the paste issue, you can simply add "paste" to the event parameter list like so: $('input').on('keypress, paste'', ()=>........
    – Jim22150
    Commented Jul 10, 2020 at 13:50
92

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);
});
7
  • 3
    +1 I was scrolling down the answers looking for an answer like this one or I would submit my own answer. This answer filters out any disallowed characters instantly! Great! Commented Mar 23, 2013 at 13:39
  • 4
    +1 Works for pasted text, doesn't interfere with FF's backspace and delete keys, and doesn't rely on event.which or event.keycode! Wish I could +10!
    – rinogo
    Commented Aug 8, 2013 at 18:39
  • 4
    ...BUT in Chrome and IE, when you type new characters or use the backspace and delete keys in the middle of the input text, the cursor is moved to the end of the text... :/ Is there an easy workaround for this? I wanted so badly for this to work!
    – rinogo
    Commented Aug 8, 2013 at 18:57
  • So close... this code has very weird behavior in Chrome Mobile. Cursor jumps around on first letter typed and on backspace too.
    – Juliano
    Commented Mar 19, 2015 at 20:18
  • 3
    @Juliano Interesting, it seems that selectionStart always returns 0 on Chrome Mobile regardless of where the cursor/caret is currently positioned. I'm not sure (yet) if this is a bug or intended behavior. I'm currently researching the issue and will update my answer or comment here when I learn more.
    – rexmac
    Commented Mar 19, 2015 at 23:23
57

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.

9
  • 1
    Awesome stuff man, awesome. I just had to add an option for enabling/disabling the slash char ('/') as it did not work while putting it in the allow setting. But that's the beauty of jquery plugins, the fact that you can modify them to suit your needs. Thanks! Commented May 10, 2013 at 11:37
  • Thanks Adrian. Btw, I just tried enabling the slash using the allow option and it worked ok for me using this code: $('#firstName').alphanum({allow: "/"}); Any chance you could provide more info? If there is a bug or a problem with the docs it would be nice to get it fixed. Cheers
    – KevSheedy
    Commented May 10, 2013 at 14:51
  • Hi KevSheedy, thanks for taking the time to test this out. Sorry I did not make it clear enough. The problem was that I also had allowOtherCharSets: false and allowCaseless: false. These interfered with the settings set in allow. From my point of view, I think that the allow option should veto out all the other options (like allowOtherCharSets or allowCaseless). So if you specify a character in the allow option, it should be allowed regardless of the other options set in the configuration object. Same goes for disallow. But this is just my opinion. :) Cheers again! :) Commented May 13, 2013 at 6:19
  • 9
    "so I went ahead and wrote jquery.alphanum" Awesome!
    – Felix
    Commented Aug 22, 2013 at 4:27
  • 2
    Everyone seems pretty thrilled with this but a user can easy paste text with any characters and this won't prevent that. Commented Mar 24, 2017 at 14:16
32

Use simple onkeypress event inline.

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

2
  • 4
    Note that onkeypress is now deprecated in favor of onkeydown
    – Thayne
    Commented Apr 25, 2022 at 15:47
  • 6
    This will fail for copied texts.
    – Architrixs
    Commented Nov 5, 2022 at 8:09
21

Use HTML5's pattern input attribute!

<input type="text" pattern="^[a-zA-Z0-9]+$" />
5
  • 29
    While this solution prevents undesired characters from being submitted, it does not prevent undesired characters from being entered into the input field.
    – rexmac
    Commented Mar 19, 2015 at 23:36
  • 4
    There is also the risk that the user is not using an HTML5 browser. Commented Aug 11, 2016 at 8:58
  • 3
    From UX experience, one thing many people hate more than being restricted in what they can type is being told you did it wrong afterwards. - Forcing of input is to reduce error messages and invalid notifications.
    – Julix
    Commented Oct 14, 2016 at 2:15
  • 2
    @Julix Its a case by case thing. There are some fields that can only be numeric (price or any currency amount, etc) where it doesn't make sense to listen to alphabetic character input. But yeah mine was not really a solution to OP's problem but a nice and easy way to help with the UX problem.
    – keepitreal
    Commented Apr 23, 2017 at 23:54
  • Warning to copy-pasters: this disables non-English chars too. Commented Jan 13 at 0:16
18

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;
        }
});
3
  • This should be the most upvoted answer. Most of the answer don't take into account those special characters that doesn't have an associated value.
    – Alain Cruz
    Commented Sep 19, 2020 at 20:06
  • This does not prevent user from copy/paste nasty characters?
    – Mike
    Commented Oct 7, 2020 at 8:17
  • this works great but you can still copy and paste invalid characters in the input field
    – pixel
    Commented May 13, 2021 at 16:31
15

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);
}
2
  • @Bhargav Rao, I deleted the other duplicate post and reposted this one because this one was more appropriate, thanks for pointing that out
    – chandler
    Commented Jul 10, 2017 at 15:47
  • 2
    This will not work when copying and pasting text with invalid characters though
    – pixel
    Commented May 14, 2021 at 15:19
13

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'});
1
  • Is there one for letters? Normally I just use nan for numbers only (like a zip code or phone)
    – user9008566
    Commented Jan 24, 2019 at 17:23
6

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

4
  • I would think that all of the keycodes that you do not want to allow can be overwhelming to try and manage.
    – RSolberg
    Commented May 21, 2009 at 23:14
  • If you want to restrict someone to only be able to enter numbers 1 through 5, you end up managing 5 keycodes within your code.
    – RSolberg
    Commented May 21, 2009 at 23:19
  • 2
    It's actually not a bad plan if AlphaNumeric isn't the plugin for you. I made it work with a switch/case statement. This example disallows characters that aren't allowed in directory names: $('input[type='text'], textarea').keydown(function(ev){ switch(ev.keyCode){case 47: case 92: case 63: case 37: case 42: case 59: case 124: case 34: case 60: case 62: return false;}; });
    – M Miller
    Commented Jul 24, 2011 at 19:42
  • 1
    @user434917, your code is not working when i test it with android mobile chrome browser. do you have any solution for it..? Commented Feb 22, 2019 at 14:43
6

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
    }
})
2
  • why !e.charCode ? e.which : e.charCode and not simply e.charCode ? e.charCode : e.which ? Commented May 4, 2018 at 12:32
  • what changes needs to make for decimal numbers acceptance?
    – ubm
    Commented Jan 30, 2020 at 5:01
5
$(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, '');
          }
       });
    });
1
  • this does not work when pasting text with invalid characters
    – pixel
    Commented May 14, 2021 at 16:07
4

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

1
  • 1
    This is working if I type manually. But I am able to paste copied special characters.
    – Code Guru
    Commented Jan 6, 2016 at 12:30
3

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());
 }); 
});
1
  • This is the perfect answer that everybody should know about it. It passed the copy pasted as well and every special characters. Great job . Thanks Commented Jun 29, 2021 at 10:52
3

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.

1
  • Either I am blind or I am missing something, but your second and third option are exactly the same, are they not?
    – andylib93
    Commented Oct 1, 2022 at 20:35
2

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)"/>
2
  • 2
    Dude, you've included a whole bunch of excess code that's probably not helpful. Can you cut it down to the bare minimum? And he was asking about jQuery, I'm not sure if the PHP is relevant.
    – Simon E.
    Commented Sep 21, 2011 at 4:49
  • @PHP Ferrari : I am using javascript code, Your Code working fine, How can I display alert popup message if the customer enters the special character. The message like "Special Characters Not Allowed".
    – Gem
    Commented Aug 17, 2017 at 6:15
2

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

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

...
2

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

2
  • I'm not sure this really adds anything to the (many) existing answers using basically the same approach.
    – DBS
    Commented Sep 7, 2021 at 12:26
  • The question doesn't say anything about an "add more" text box or any form of invoicing?
    – DBS
    Commented Sep 7, 2021 at 12:34
1
/**
     * 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;
    }
1

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.

1

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

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();
            }
        }
    }
});
1
  • 4
    Code-only answers aren't too useful without an explanation.
    – Vemonus
    Commented Jan 20, 2017 at 16:40
0
$(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;
    }
}
0

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

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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