テキスト ボックスの数値入力を制限する必要があることがよくあり、さまざまな方法を試しましたが、どれも理想的ではなかったので、趣味で自分で実装することにしました。
使用されているメソッド
onkeydown イベントを通じて許可される番号のみを制御します:
jQuery プラグイン経由 Masked Input: http://digitalbush.com/projects/masked-input-plugin/
jQuery プラグイン MeioMask 経由: https://github. com/fabiomcosta /jquery-meiomask
2 つの jQuery プラグインは比較的柔軟に使用でき、ほとんどのニーズを満たすことができますが、入力の長さの制御には非常に柔軟性がありません (おそらく、柔軟な使用方法が見つかっていないでしょうか?)
キーボードのタップを処理するには、stackoverflow で提供される一般的なメソッドを使用します: http://stackoverflow.com/questions/469357 / html-text-input-allow-only-numeric-input
更新: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes にリストされているキーコードを参照してください
function validateDigitsOnly(evt) {
var e = evt || window.event,
key = e.keyCode || e.while;
if (
// Backspace、Tab、Enter、Esc、Delete
キー== 8 || キー == 9 || キー == 27 ||
// Ctrl A
(キー == 65 && = true) ||
// ホーム、エンド、4 方向キー
key >= 35 && key
if (e.shiftKey || e.altKey || e.ctrlKey) {
return false
}
var el = e.srcElement || 数値の最大長
nl = el.getAttribute(" data-numbers") || 15,
// 10 進数の最大長
dl = el.getAttribute("data-numbers") || 2,
val = el.value,
// "." Position
dotIndex = val.indexOf("."),
rng =caret.call(el),
// カーソルは "." の左側にあります
rLeft = rng.end < ;= dotIndex,
// カーソルは「.」の右側にあります
rright = rng.begin >
if (
// Number
key >= 48 && key // 数字キーボードで入力された数値
key >= 96 && key if (validateValue) (dotIndex, val, rLeft, rRight, nl, dl))
return;
// テキストの一部を選択し、再度処理します
val = val.substring(0, rng.begin) val. substring(rng.end);
dotIndex = val.indexOf( ".");
if (dotIndex, val, rLeft, rRight, nl, dl))
}
else if (
// ".", " ,"
(key == 190 /*|| key == 188*/ ||
// ".", ","
key == 110/*|| 数字キーボードのキー == 109*/) &&
// 小数点の入力を許可します
dl > // 「.」が入力されておらず、入力位置以降の小数点以下の桁数が上限に達していません
dotIndex == -1 && (rng.end == val.length || val.substring(rng. end).length <= dl) ||
// 選択されたテキストには "." が含まれています
dotIndex > && rng.begin <= dotIndex && dotIndex < .end)
return;
}
return false;
}
// 入力された値を検証します
function validateValue(dotIndex, val, rLeft, rRight, nl, dl) {
if (
// 「.」が入力されていません
dotIndex = = -1 && val.length < nl ||
// カーソル位置は「.」の前です
rLeft && val.substring(0, dotIndex).length < nl ||
// 「.」以降の小数点以下の上限に達していないカーソル
rRight && val.substring(dotIndex 1).length < ; dl)
return true;
return false;
関数 cart() {
var begin, end; 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 };
}
使用法
具体的な使用法は次のとおりです。 >コードをコピーします
コードは次のとおりです:
著者別の最新記事
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
