検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript はテキスト ボックスに数字のみを入力できるように制限します (現在の方法と比較して)_javascript スキル

JavaScript はテキスト ボックスに数字のみを入力できるように制限します (現在の方法と比較して)_javascript スキル

WBOY
WBOYオリジナル
2016-05-16 17:43:211014ブラウズ

テキスト ボックスの数値入力を制限する必要があることがよくあり、さまざまな方法を試しましたが、どれも理想的ではなかったので、趣味で自分で実装することにしました。

使用されているメソッド
onkeydown イベントを通じて許可される番号のみを制御します:

コードをコピー コードは次のとおりです:



jQuery プラグイン経由 Masked Input: http://digitalbush.com/projects/masked-input-plugin/
jQuery プラグイン MeioMask 経由: https://github. com/fabiomcosta /jquery-meiomask
上記の簡易版では、onkeydown イベントの制御が比較的面倒で、操作感が悪くなります。
2 つの jQuery プラグインは比較的柔軟に使用でき、ほとんどのニーズを満たすことができますが、入力の長さの制御には非常に柔軟性がありません (おそらく、柔軟な使用方法が見つかっていないでしょうか?)

特定の実装方法
maskedInput のいくつかのメソッドを使用してカーソル位置を抽出します
キーボードのタップを処理するには、stackoverflow で提供される一般的なメソッドを使用します: http://stackoverflow.com/questions/469357 / html-text-input-allow-only-numeric-input
更新: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes にリストされているキーコードを参照してください
次に、2 つの属性をカスタマイズして、入力数値と小数点以下の長さを設定します。
•data-numbers は数値入力の長さを制御します
•data-Decimals は 10 進数入力の長さを制御します
最後に、コード全体が実装されます。
コードをコピー コードは次のとおりです。

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 };
}



使用法

具体的な使用法は次のとおりです。 >コードをコピーします


コードは次のとおりです: