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 input Numbers only4//</summary>5//----------------------------------------------------------------------6 $.fn.onlynum =function() {7 $ (This). KeyPress (function(event) {8var eventObj = Event | |E9var keycode = Eventobj.keycode | |Eventobj.which;10if ((keycode >= && keycode <= 57))11ReturnTrue;12Else13ReturnFalse;). Focus (function() {15//Disable IME16This.style.imeMode = ' disabled ';+}). Bind ("Paste",function() {18 // get Clipboard contents 19 var clipboard = Window.clipboardData.getData ("Text" ); 20 if (/^\d+$/.test ( Clipboard)) 21 return ; else23 return false; }); 25};             

Second, limit the input of letters only

1//----------------------------------------------------------------------2//<summary>3//Limit input Letters only4//</summary>5//----------------------------------------------------------------------6 $.fn.onlyalpha =function() {7 $ (This). KeyPress (function(event) {8var eventObj = Event | |E9var keycode = Eventobj.keycode | |Eventobj.which;10if ((keycode >= && keycode <= 90) | | (KeyCode >= && keycode <= 122))11ReturnTrue;12Else13ReturnFalse;). Focus (function() {15This.style.imeMode = ' disabled ';16}). Bind ("Paste", function () { 17 var clipboard = Window.clipboardData.getData ("Text" ); 18 if (/^[a-za-z]+$/19 return true; else21 return false; }); 23};             

Third, limit the number and letters can only be entered

1//----------------------------------------------------------------------2//<summary>3//Limit input numbers and letters only4//</summary>5//----------------------------------------------------------------------6 $.fn.onlynumalpha =function() {7 $ (This). KeyPress (function(event) {8var eventObj = Event | |E9var keycode = Eventobj.keycode | |Eventobj.which;10if ((keycode >= && keycode <= 57) | | (KeyCode >= && keycode <= 90) | | (KeyCode >= && keycode <= 122))11ReturnTrue;12Else13ReturnFalse;). Focus (function() {15This.style.imeMode = ' disabled ';16}). Bind ("Paste", function () { 17 var clipboard = Window.clipboardData.getData ("Text" ); 18 if (/^ (\d|[ A-za-z]) +$/.test (clipboard)) 19 return true;20 else21 return false; }); 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 ();  restrict controls that use the Onlyalpha class style to enter only the letter 5 $ (". Onlyalpha"). Onlyalpha ();  restricting controls that use the Onlynumalpha class style can only enter 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:<InputType= "Text"Class= "Onlynum"/></Li>3<Li> can only enter letters:<InputType= "text"  Class= " Onlyalpha "/></li >4 <li> can only enter numbers and letters: < input type= "text" Span style= "color: #ff0000;" > Class= "Onlynumalpha" /></li>5 </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. "

　　

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