Use jquery to control text boxes to enter only numbers and letters

For the three input limits of "only numbers", "only letters" and "only numbers and letters", I encapsulate the 3 jquery extension methods of Onlynum (), Onlyalpha () and Onlynumalpha () to facilitate reuse, Because some of the JS code is related to "Disable Input method, get clipboard content", and "Disable Input method, get clipboard content" only in IE browser is valid, for other browsers is invalid, so these three methods only suitable for use in IE browser is valid, three methods of code as follows

First, limit the number can only be entered

// ----------------------------------------------------------------------//<summary>//limit input numbers only//</summary>// ----------------------------------------------------------------------$.fn.onlynum =function () {    $( This). KeyPress (function(event) {varEVENTOBJ = Event | |e; varkeycode = Eventobj.keycode | |Eventobj.which; if((keycode >= && keycode <= 57))            return true; Else            return false; }). Focus (function () {    //Disable IME         This. Style.imemode = ' disabled '; }). bind ("Paste",function () {    //get the contents of the Clipboard        varClipboard = Window.clipboardData.getData ("Text"); if(/^\d+$/. Test (clipboard))return true; Else            return false; });};

limit input numbers only

Second, limit the input of letters only

// ----------------------------------------------------------------------//<summary>//limit input Letters only//</summary>// ----------------------------------------------------------------------$.fn.onlyalpha =function () {    $( This). KeyPress (function(event) {varEVENTOBJ = Event | |e; varkeycode = Eventobj.keycode | |Eventobj.which; if((keycode >= && keycode <= 90) | | (KeyCode >= && keycode <= 122))            return true; Else            return false; }). Focus (function () {         This. Style.imemode = ' disabled '; }). bind ("Paste",function () {        varClipboard = Window.clipboardData.getData ("Text"); if(/^[a-za-z]+$/. Test (clipboard))return true; Else            return false; });};

limit input Letters only

Third, limit the number and letters can only be entered

// ----------------------------------------------------------------------//<summary>//limit input numbers and letters only//</summary>// ----------------------------------------------------------------------$.fn.onlynumalpha =function () {    $( This). KeyPress (function(event) {varEVENTOBJ = Event | |e; varkeycode = Eventobj.keycode | |Eventobj.which; if((keycode >= && keycode <= 57) | | (KeyCode >= && keycode <= 90) | | (KeyCode >= && keycode <= 122))            return true; Else            return false; }). Focus (function () {         This. Style.imemode = ' disabled '; }). bind ("Paste",function () {        varClipboard = Window.clipboardData.getData ("Text"); if(/^ (\d| [A-za-z]) +$/. Test (clipboard))return true; Else            return false; });};

limit input numbers and letters only

How to use: First write the following JS script after the screen loading is complete

$ (function  () {    //  restricts the control that uses the Onlynum class style to enter only the number    $ (". Onlynum"). Onlynum ();     // restrict controls that use the Onlyalpha class style to enter only letters    $ (". Onlyalpha"). Onlyalpha ();     // restrict controls that use the Onlynumalpha class style to enter only numbers and letters    $ (". Onlynumalpha"). Onlynumalpha ();   });

Set the class style for controls that require input control

<ul>        <li> Enter only numbers: <input type= "text" class= "Onlynum"/></li>        <li> enter only letters: <input type= "text" class= "Onlyalpha"/></li>        <li> can only enter numbers and letters: <input type= "text" class= " Onlynumalpha "/></li></ul>

In this case, a control that has the class= "Onlynum" on the screen can only enter a number, the control with class= "Onlyalpha" can only enter letters, and the class ="Onlynumalpha" is set. Control can only enter numbers and letters, in this way it restricts the user's input range and avoids some illegal input by the user.

In my opinion, this way of restricting the control input is a better way to avoid user error, usually the traditional practice is the user entered the illegal characters, we then pop up a message box to tell the user entered illegal characters, this way is " user has done, We tell users not to do so ", and the way it does is to let users enter only the characters we specify, so that" users never have a chance to make mistakes. "

Use jquery to control text boxes to enter only numbers and letters