JS Digital input box (including maximum minimum value limit and rounding) _javascript tips

Source: Internet
Author: User
As the original text has been introduced very well, now is only a few translations and a small supplement.
Example
Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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 to 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>
<body>
<table>
<tr>
<td>
<span id= ' lblrule ' > Format: 9999.99 (range is 0-9999.99) (dynamically modify Alt property): </span>
</td>
<td>
<input id= "Text1" value= "type=" text "style=" Text-align:right "alt=" p4c3p2s "size=" "/>"
<input type= "button" value= ' format display ' onclick= ' Show (); "/>
<input type= "button" value= ' changing attribute ' onclick= ' change (); " />
</td>
</tr>
<tr>
<td>
<span id= ' LBL1 ' > uses the Strip () method to remove formatting such as ' 1,123 ' to ' 1123 ' (show only the first text box content): </span>
</td>
<td>
<input id= "Text2" value= "type=" text "style=" Text-align:right "readonly=" readonly "alt=" p4c3p0s "size=" "/>"
</td>
</tr>
<tr>
<td>
<span id= ' lbl2 ' > formatted numbers, where you do rounded rounding, such as ' 5.6 ' to ' 6 ' (show only the first text box content): </span>
</td>
<td>
<input id= "Text3" value= "type=" text "style=" Text-align:right "readonly=" readonly "alt=" p4c3p0s "size=" "/>"
</td>
</tr>
</table>
</body>

Characteristics of this plugin:

. You can only enter numbers, decimal separators (including decimal points), minus sign.
supports different input formats for each text input on the same page, which means you can customize each input box on the page.
. Nine different number-fixing rules (that is, rounding those up)
. You can set the maximum value for integers and decimals, with a minimum value (easy to use)
. The input value can be either positive or negative.
. Only decimal and zero, leading characters can be zero. However, if the input number is "900", delete "9" it will retain 00.
. supports pasting, but when pasting text, it becomes "0.00".
. The public method strip () can be stripped of formatting.
. The public method format () can format the values that you want.

About the settings in the ALT attribute:

There are 7 characters in Alt, representing 7 formatting attributes:
First: The value is ' P ' (only a positive number) or ' n ' (both positive and negative can be entered)
The second: The value is 0-9, representing the number of digits to the left of the decimal separator. (You can enter a 15-bit integer When you are ' 0 ')
Third: The delimiter used as a grouping of numbers (that is, the delimiters for the thousand-bit, etc.)
A: Single quotes or apostrophes (can be used when timing and angle)
C: comma (default)
P: Period (if the separator of the decimal point is also a period conflict)
S: Space number
X: None
Fourth: The value is 2,3 (default), 4, the number of digits used as a grouping of numbers (such as ' 3 ' words ' 123,123 ', ' 4 ' words for ' 12,3123 ', ' 2 ') as if it was India there is such a division, see the original author wrote)
Fifth: The separator for the decimal point. The value has a C (comma) and a p (period), and P is the default.
Sixth: Number of decimal places
: decimal is not allowed, which means only integers can be entered
-9: Decimal digits (default is 2, such as ' 1.23 ')
A-Z: Includes case, it will look for the number of "dp[a-z" input box, and the inside number as a decimal number of digits, that is, you can dynamically modify the decimal places.
Seventh: Nine different digital revision rules
S = round-half-up symmetric (default, general rounding is used for it)
A = round-half-up Asymmetric
s = round-half-down symmetric
A = Round-half-down Asymmetric
B = Round-half-even "Bankers rounding" (banker algorithm? No use)
U = Round Up "Round-away-from-zero" (with this, of course, not only for integer categories, but also for decimal places)
D = Round Down "Round-toward-zero" (this is used for the smallest integer)
C = Round to Ceiling "toward Positive Infinity"
F = Round to Floor "toward Negative Infinity"
There is an English article about this digital revision rule, which can be referred to.
Http://www.diycalculator.com/popup-m-round.shtml
There are some examples of the features of pasting and the revision of numbers. Interested can take a look at the author's original text.
Thank you very much for being able to provide such a good jquery plugin.
Test 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.