JS numeric input box (including maximum and minimum limits and rounding)

Source: Internet
Author: User

Since the original article has already been quite well introduced, it is only some translation and a small supplement.
Example CopyCode The Code is as follows: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> demo </title>
<SCRIPT type = "text/JavaScript" src = "jquery-1.2.6.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "autonumeric. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
Jquery (function ($ ){
$ (': Text'). Focus (function (){
$ (': Text'). autonumeric ();
});
});

VaR change = function (){
// Change the rule.
$ (": Text [ID $ = 'text1']"). ATTR ('alt', 'p2c3p0s ');
// Clear the text
$ (": Text [ID $ = 'text1']"). Val ('');
$ ("Span [ID $ = 'lblrule']"). Text ('format: 99 (range: 0-99 )');
}

VaR show = function (){
// Format the text2 and text3.
VaR convertinput = $. FN. autonumeric. Strip ($ (": Text [ID $ = 'text1']"). ATTR ("ID "));
$ (": Text [ID $ = 'text2']"). Val (convertinput );
$ (": Text [ID $ = 'text3']"). val ($. FN. autonumeric. format ($ (": Text [ID $ = 'text3']"). ATTR ("ID"), convertinput ));
}
</SCRIPT>
</Head>
<Body>
<Table>
<Tr>
<TD>
<Span id = 'lblrule'> Format: 9999.99 (range: 0-9999.99) (dynamically modify the alt attribute): </span>
</TD>
<TD>
<Input id = "text1" value = "" type = "text" style = "text-align: Right" alt = "p4c3p2s" size = "25"/>
<Input type = "button" value = 'formatted display 'onclick = "show ();"/>
<Input type = "button" value = 'change attribute 'onclick = "Change ();"/>
</TD>
</Tr>
<Tr>
<TD>
<Span id = 'lbl1'> the strip () method is used to remove the format. For example, if '123' is changed to '123' (only the content of the first text box is displayed): </span>
</TD>
<TD>
<Input id = "text2" value = "" type = "text" style = "text-align: right "readonly =" readonly "alt =" p4c3p0s "size =" 25 "/>
</TD>
</Tr>
<Tr>
<TD>
<Span id = 'lbl2'> Format a number. Here, the number is rounded to an integer, for example, '5. 6' to '6' (only the content of the first text box is displayed): </span>
</TD>
<TD>
<Input id = "text3" value = "" type = "text" style = "text-align: right "readonly =" readonly "alt =" p4c3p0s "size =" 25 "/>
</TD>
</Tr>
</Table>
</Body>
</Html>

Features of this plug-in:

. You can only enter numbers, decimal separators (including decimal points), and negative signs.
. Supports different input formats for each text input on the same page, that is, You Can Customize settings for each input box on the page.
There are nine different digital contract repair rules (that is, rounding the rules)
. You can set the maximum and minimum values for integers and decimals respectively (very useful)
. The input value can be positive or negative.
. Only the decimal point and zero point are allowed, and the leading character can be zero. If the input number is "900", deleting "9" will retain 00.
. Supports pasting, but the text will become "0.00 ".
. The public method strip () can be removed from formatting.
. The public method format () can format the required value.

Settings in the alt attribute:

Alt contains a total of 7 characters, representing 7 formatting attributes:
First: the value is 'P' (only positive numbers can be input) or 'N' (both positive and negative values can be input)
Second: the value is 0-9, which represents the number of digits to the left of the decimal point separator. (if it is '0', you can enter a 15-digit integer)
Third: Use the Separator Used for grouping numbers (that is, the Separator Used for sub-bit and so on)
A: single quotation marks or apostrophes (available for timing and angle)
C: comma (default)
P: period (if the decimal point separator is also a period, there will be a conflict)
S: space number
X: None
Fourth: the value is 2, 3 (default), and 4. It is used as the number of digits in the number group (for example, '3' is '123', and '4' is '123 ', in '2', it seems that India has such a division method. See the original article written by the author)
Fifth: the decimal point separator. The values are C (comma) and P (period), and P is the default.
Sixth: number of decimal places
: Decimals are not allowed, that is, only integers are allowed.
-9: number of decimal places (the default value is 2, for example, '1. 23 ')
A-Z: It is case sensitive. It will find the number input box with ID 'dp [A-Z] 'and use the number in it as the decimal number, that is to say, the number of decimal places can be dynamically modified.
Seventh: nine different digital contract repair rules
S = round-half-up limit RIC (default, usually rounded to use it)
A = round-half-up asypolicric
S = round-half-down symmetric
A = round-half-down asypolicric
B = round-half-even "Bankers rounding" (banker Algorithm ? Never used)
U = round up "Round-away-from-zero)
D = round down "Round-toward-zero" (this is used when the smallest integer is used)
C = round to ceiling "toward positive infinity"
F = round to floor "toward negative infinity" There is an English article on this digital contract repair rule Article For more information, see. Bytes. If you are interested, you can refer to the original article of the author. Thank you very much for providing such a good jquery plugin.

Testing code packaging http://xiazai.jb51.net/200911/yuanma/numeric-demo.rar

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.