Javascript limit text box only allows the input of numbers (compared with the current method) _ javascript skills

In many cases, it is necessary to restrict the numeric input in the text box. I have tried many methods, but it is not ideal. I decided to implement one by myself, next we will introduce the comparison between the methods we have used and the custom methods. If you are interested, you can find out that many times you need to use the numeric input of the restricted text box. I have tried many methods, not ideal, so I decided to come and have fun.

Methods Used
The onkeydown event is used to control only allowed numbers:

The Code is as follows:

Using the jQuery plug-in Masked Input: http://digitalbush.com/projects/masked-input-plugin/
Using jQuery plug-in MeioMask: https://github.com/fabiomcosta/jquery-meiomask
The onkeydown event is relatively difficult to control. Many of the preceding simplified versions do not involve keys, and the operation experience is poor.
The two jQuery plug-ins are flexible to use and can meet most of the requirements, but the restriction on the length of the input is not flexible (maybe I did not find a flexible way to use it ?)

Implementation Method
Use a part of maskedInput to extract the cursor position
Use the general method provided on stackoverflow to handle keyboard percussion: http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input
Update: refer to the keycode listed on http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes.
Then, you can customize two attributes to set the input number and decimal length:
• Data-numbers controls the length of numeric Input
• Data-decimals controls the length of fractional Input
The code is implemented as follows:

The Code is as follows:

Function validateDigitsOnly (evt ){
Var e = evt | window. event,
Key = e. keyCode | e. which;
If (
// Backspace, Tab, Enter, Esc, Delete
Key = 8 | key = 9 | key = 13 | key = 27 | key = 46 |
// Ctrl +
(Key = 65 & event. ctrlKey = true) |
// Home, End, four direction keys
Key> = 35 & key <= 40 ){
Return;
}
If (e. shiftKey | e. altKey | e. ctrlKey ){
Return false;
}
Var el = e.tar get | e. srcElement,
// Maximum numeric Length
Nl = el. getAttribute ("data-numbers") | 15,
// Maximum decimal Length
Dl = el. getAttribute ("data-decimals") | 2,
Val = el. value,
// "." Location
DotIndex = val. indexOf ("."),
Rng = caret. call (el ),
// The cursor is on the left "."
RLeft = rng. end <= dotIndex,
// Cursor on the right side "."
RRight = rng. begin> dotIndex;
If (
// Number
Key >=48 & key <= 57 |
// Number entered by the numeric keypad
Key >=96 & key <= 105 ){
If (validateValue (dotIndex, val, rLeft, rRight, nl, dl ))
Return;
// The selected text is processed again
Val = val. substring (0, rng. begin) + val. substring (rng. end );
DotIndex = val. indexOf (".");
If (validateValue (dotIndex, val, rLeft, rRight, nl, dl ))
Return;
}
Else if (
//".",","
(Key = 190/* | key = 188 */|
".",","
Key = 110/* | key = 109 */)&&
// Allow decimal Input
Dl> 0 ){
If (
// "." Is not input, and the number of decimal places after the input position does not reach the upper limit
DotIndex =-1 & (rng. end = val. length | val. substring (rng. end). length <= dl) |
// Enter "." And the selected text contains "."
DotIndex>-1 & rng. begin <= dotIndex & dotIndex <rng. end)
Return;
}
Return false;
}
// Verify the input value
Function validateValue (dotIndex, val, rLeft, rRight, nl, dl ){
If (
// "." Is not input "."
DotIndex =-1 & val. length <nl |
// The cursor is located before "."
RLeft & val. substring (0, dotIndex). length <nl |
// The cursor after "." does not reach the decimal limit
RRight & val. substring (dotIndex + 1). length <dl)
Return true;
Return false;
}
// Obtain the cursor position
Function caret (){
Var begin, end;
If (this. setSelectionRange ){
Begin = this. selectionStart;
End = this. selectionEnd;
} Else if (document. selection & document. selection. createRange ){
Var range = document. selection. createRange ();
Begin = 0-range. duplicate (). moveStart ('character ',-100000 );
End = begin + range. text. length;
}
Return {begin: begin, end: end };
}

Usage
The usage is as follows:

The Code is as follows:

Script
Document. getElementById ("t1"). onkeydown = validateDigitsOnly;
Document. getElementById ("t2"). onkeydown = validateDigitsOnly;
Script

Or simply write it in html:

The Code is as follows:

If jQuery is introduced, it will be simpler to use:

The Code is as follows:

The Code is as follows:

$ (". DigitsOnly"). keydown (validateDigitsOnly );

End
Although this method is not efficient enough in some places, and some keyboard keys are not processed yet, it is not ruled out that some cases may fail, but it is enough for most cases.
If you have additional requirements, Please modify them by yourself. Of course, there are better ways to share them (* ^__ ^ *)
Over
PS: 01.18 updated some keyCode judgments, and wrote 110 as a 109 forbidden (negative correlation) regression.
In addition, you need to handle the need to use the right-click menu or paste the menu bar.;
There is also an extreme situation: select and drag text in the webpage to the text box, or select and drag text in the text box, this requires additional processing
For the above two cases that require additional processing, the more convenient method is to add a verification, such as form verification such as jQuery. validate, otherwise it will be more difficult to process
PS: In win8, you may not be able to enter it if you switch to Microsoft pinyin. Do you know if this problem is caused by other systems or input methods (*_*)('~~ ') =