ホームページ >ウェブフロントエンド >jsチュートリアル >HTML テキストの入力を数値のみに制限するにはどうすればよいですか?

HTML テキストの入力を数値のみに制限するにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-17 05:35:25383ブラウズ

How to Restrict HTML Text Input to Numeric Values Only?

HTML テキスト入力フィールドで数値入力のみを許可する方法

JavaScript の setInputFilter 関数を利用して、テキスト入力フィールド内のユーザー入力を制限できます。数字と小数点('.'):

function setInputFilter(textbox, inputFilter, errMsg) {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function (event) {
        textbox.addEventListener(event, function (e) {
            if (inputFilter(this.value)) {
                if (["keydown", "mousedown", "focusout"].indexOf(e.type) >= 0) {
                    this.classList.remove("input-error");
                    this.setCustomValidity("");
                }

                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (this.hasOwnProperty("oldValue")) {
                this.classList.add("input-error");
                this.setCustomValidity(errMsg);
                this.reportValidity();
                this.value = this.oldValue;
                this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
            } else {
                this.value = "";
            }
        });
    });
}

数値入力を強制するには、次のフィルターを使用します:

setInputFilter(document.getElementById("myTextBox"), function (value) {
    return /^\d*\.?\d*$/.test(value); 
});

このフィルターは正規表現 ^d*.?d*$ に対して入力を検証します。 、数字、小数点、またはその両方の組み合わせのみを含む文字列を受け入れます。

以上がHTML テキストの入力を数値のみに制限するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。