How the text box restricts the ability to enter only numbers:
Under certain requirements, the content of the text box is only allowed to enter a number, such as mobile phone number or ID number, etc., the following is a simple example of how to achieve this effect, code examples are as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>text box can only enter numbers-ant tribe</title> <Scripttype= "Text/javascript"src= "Mytest/jquery/jquery-1.8.3.js"></Script><Scripttype= "Text/javascript">jQuery (document). Ready (function($){ varPhone=$('#phone'); $ (phone). On ('Click',function() {Phone.val ("'); }) $ (phone). On ('KeyUp',function(evt) {varPhoneval=Phone.val (); Phoneval=Phoneval.replace ('/[^\d]+/g', "'); Phoneval=parseint (Phoneval,Ten); if(IsNaN (phoneval)) {Phoneval="'; } This. Value=Phoneval; }) })</Script> </Head> <Body> <inputtype= "text"ID= "Phone"/> </Body> </HTML>
The above code implements our needs, when the text box input non-digital content will be automatically cleared, the following describes the implementation process:
I. Principle of implementation:
in the code, use the On () function to register the click event handler for the text box, and when you click the text box, you can then register the KeyUp event handler for the text box and then the text box, and when the key is released, you get the contents of the TextBox input. You can then replace non-numeric elements with NULL by using the Replace function in conjunction with the regular expression matching principle, which is generally the case, see the code comment below.
two. Code comments:
1.jQuery (document). Ready (function ($) {}), when the document structure is fully loaded, then execute the code in the function.
2.var phone=$ (' #phone '), gets the id attribute value for the phone object.
3.$ (Phone). On (' click ', Function () {}), use on to register the Click event handler function for the element.
4.phone.val ("), set the value in the text box to null.
5.$ (Phone). On (' KeyUp ', function (evt) {}), use on for the element ancestor book KeyUp event handler function, the function parameter is the event object, here is not used, can be removed.
6.var Phoneval=phone.val () to get the contents of the text box.
7.phoneval=phoneval.replace ('/[^\d]+/g ', ') replaces the non-numeric element in the text box with NULL.
8.phoneval=parseint (phoneval,10), converts the number to a numeric type.
9.if (IsNaN (phoneval)) to detect if the parameter is a non-numeric type.
10.phoneval= ', set the content to empty.
11.this.value=phoneval, set the contents of the text box to the processed phoneval.
three. Related reading:
the 1.on function can be found in the chapter on the On () method of jquery .
the 2.val () function can be found in the section of the Val () method of jquery .
The 3.keyup event can be found in the KeyUp event section of jquery .
the 4.parseInt () function can be found in the parseint () function section of JavaScript .
the 5.isNaN () function can be found in the IsNaN () method section of JavaScript .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=8796\
More content can be found in: http://www.softwhy.com/jquery/
How the text box restricts the ability to enter only numbers
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
