JavaScript restricts the text box to only allow numbers to be entered (compared with the current method)

Many times it is necessary to limit the numerical input of text boxes. I have tried many methods, but none of them are ideal, so I decided to implement one myself for fun.

Methods that have been used
Control only numbers allowed through the onkeydown event:

Copy code The code is as follows:

Via jQuery plugin Masked Input: http://digitalbush.com/projects/masked-input-plugin/
Via jQuery plugin MeioMask: https://github.com/fabiomcosta /jquery-meiomask
It is relatively troublesome to control the onkeydown event. Many keys are not involved in the simplified version above, and the operating experience is poor.
The two jQuery plug-ins are relatively flexible to use and can meet most needs, but they are very inflexible in controlling the input length (maybe I haven’t found a flexible way to use it?)

Specific implementation method
Use some methods in maskedInput to extract the cursor position
Use the general methods provided on stackoverflow to handle keyboard taps: http://stackoverflow.com/questions/469357 /html-text-input-allow-only-numeric-input
Update: refer to the keycodes listed at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
Then customize two attributes to set the length of input numbers and decimals:
•data-numbers controls the length of numeric input
•data-decimals controls the length of decimal input
Finally, the entire code is implemented as follows:

Copy code 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 A 
(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.target || e.srcElement, 
// Maximum number length
nl = el.getAttribute(" data-numbers") || 15, 
// Maximum decimal length
dl = el.getAttribute("data-decimals") || 2, 
val = el.value, 
// "." Position
dotIndex = val.indexOf("."), 
rng = caret.call(el), 
// The cursor is to the left of "."
rLeft = rng.end < ;= dotIndex, 
// The cursor is on the right of "."
rRight = rng.begin > dotIndex; 
if ( 
// Number
key >= 48 && key < = 57 || 
// Number entered on the numeric keyboard 
key >= 96 && key <= 105) { 
if (validateValue(dotIndex, val, rLeft, rRight, nl, dl)) 
return; 
// Select part of the text and process it 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 on the numeric keyboard == 109*/) && 
// Allow decimals to be entered 
dl > 0) { 
if ( 
// "." is not entered, and the number of decimal places after the input position is not Reached upper limit 
dotIndex == -1 && (rng.end == val.length || val.substring(rng.end).length <= dl) || 
// lost ".", And the selected text contains "." 
dotIndex > -1 && rng.begin <= dotIndex && dotIndex < rng.end) 
return; 
} 
return false; 
 } 
// Validate the entered value 
function validateValue(dotIndex, val, rLeft, rRight, nl, dl) { 
if ( 
// No "." has been entered 
dotIndex = = -1 && val.length < nl || 
// The cursor position is before "."
rLeft && val.substring(0, dotIndex).length < nl || 
// The cursor After "." and not reaching the upper decimal limit 
rRight && val.substring(dotIndex 1).length < dl) 
return true; 
return false; 
} 
// Get 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 }; 
} 