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

Only to find a way to succeed, not to find excuses for failure!

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

When the company developed the WinForm project, found that the company's own research and development of the TextBox control is very powerful, can achieve "only enter the number", "only enter letters" and "only enter numbers and letters" Three input restrictions, so that you can precisely control the user input content range, so that " Users will never be able to enter content beyond the scope of the restricted content ", that is," users even if they want to make a mistake, there is no chance, "the way to restrict the control input gives me a lot of inspiration, if the Web project can also be done with such precise control, you can avoid some illegal input caused by system error, Since WinForm inside can implement such a control, then the Web project should also have a way to implement similar to the control or can do similar effects, after their own research and find data, finally achieve a similar effect, for "only enter the number," "Only enter the letter" and " Can only enter numbers and letters "Three kinds of input restrictions, I encapsulated into Onlynum (), Onlyalpha () and Onlynumalpha () 3 jquery extension methods, easy to reuse, because some JS code inside the" Disable Input method, get clipboard content ", and" Disable Input method, get clipboard content "only in IE browser is valid, for other browsers is not valid, so these three methods only suitable for use in IE browser only valid, three methods of code as follows

First, limit the number can only be entered

1//----------------------------------------------------------------------2//<summary> 3//Limit only enter the number 4//</ Summary> 5//----------------------------------------------------------------------6 $.fn.onlynum = function () {7     $ (this). KeyPress (event) {8         var eventObj = Event | | E; 9         var keycode = Eventobj.keycode | | eventObj . which;10         if ((keycode >= && keycode <=) return true;12 else13             return false;14< c7/>}). focus (function () {     //disable IME         this.style.imeMode = ' disabled '; n     }). bind ("Paste", function () {     //Get the contents of the Clipboard         var clipboard = window.clipboardData.getData ("Text");         if (/^\d+$/.test (clipboard) )             return true;22         else23             return false;24     }); 25};

Second, limit the input of letters only

1//----------------------------------------------------------------------2//<summary> 3//Limit only enter the letter 4//</ Summary> 5//----------------------------------------------------------------------6 $.fn.onlyalpha = function () {7     $ (this). KeyPress (function (event) {8         var eventObj = Event | | E; 9         var keycode = Eventobj.keycode | | event Obj.which;10         if ((keycode >= && keycode <= 90) | | (KeyCode >= && keycode <= 122))             return true;12         else13             return false;14     }). focus (function () {         This.style.imeMode = ' disabled     bind ("Paste", function () {$         var clipboard = window.clipboardData.getData ("Text"), and         if (/^[ A-za-z]+$/.test (clipboard))             return true;20         else21             return false;22     }); 23};

Third, limit the number and letters can only be entered

1//----------------------------------------------------------------------2//<summary> 3//Limit only enter numbers and letters 4//&L T;/summary> 5//----------------------------------------------------------------------6 $.fn.onlynumalpha = function () {7     $ (this). KeyPress (function (event) {8         var eventObj = Event | | E; 9         var keycode = EVENTOBJ.KEYC Ode | | Eventobj.which;10         if ((keycode >= && keycode <= 57) | | (KeyCode >= && keycode <= 90) | | (KeyCode >= && keycode <= 122))             return true;12         else13             return false;14     }). focus (function () {         This.style.imeMode = ' disabled     bind ("Paste", function () {$         var clipboard = window.clipboardData.getData ("Text"),         if (/^ (\ d| [A-za-z]) +$/.test (clipboard))             return true;20         else21             return false;22     }); 23};

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

1 $ (function () {2     //Limit controls that use the Onlynum class style can only enter the number 3     $ (". Onlynum"). Onlynum (); 4     // Restrict controls that use the Onlyalpha class style to enter only the letter 5     $ (". Onlyalpha"). Onlyalpha (); 6     //Restrict controls that use Onlynumalpha class styles to enter only numbers and letters 7     $ (". Onlynumalpha "). Onlynumalpha (); 8    });

Set the class style for controls that require input control

1  <ul>2         <li> can only enter numbers: <input type= "text" class= "Onlynum"/></li>3         <li> You can only enter letters: <input type= "text" class= "Onlyalpha"/></li>4         <li> can only enter numbers and letters: <input type= "Text" class= "Onlynumalpha"/></li>5  </ul>

In this case, the class= "Onlynum" control on the screen can only enter a number, set the class= "Onlyalpha" control can only enter letters, set the class= "Onlynumalpha" control can only enter numbers and letters, In this way, the user's input range can be limited and the user is prevented from making some illegal input.

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 to enter illegal characters, this way is " user has done, we tell users not to do so "and the way it works is to allow users to enter only the characters we specify, so that" users never have a chance to make mistakes. "

　　

Writing this article is not only a summary of my own study, but also hope to some beginners friends have certain help, the above article content if there is not written in the place, welcome friends correct, I am grateful! , in addition, if a friend has a way under Firefox and Google can also disable input method and get clipboard content, but also hope to tell me, thank you!

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