Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Mengehadkan Input Teks HTML kepada Nilai Angka Sahaja?

Bagaimana untuk Mengehadkan Input Teks HTML kepada Nilai Angka Sahaja?

Patricia Arquette
Lepaskan: 2024-12-17 05:35:25
asal
380 orang telah melayarinya

How to Restrict HTML Text Input to Numeric Values Only?

Cara Membenarkan Hanya Input Angka dalam Medan Input Teks HTML

Seseorang boleh memanfaatkan fungsi setInputFilter JavaScript untuk menyekat input pengguna dalam medan input teks untuk aksara angka dan titik perpuluhan ('.'):

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 = "";
            }
        });
    });
}
Salin selepas log masuk

Untuk menguatkuasakan angka input, gunakan penapis berikut:

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

Penapis ini mengesahkan input terhadap ungkapan biasa ^d*.?d*$, yang menerima rentetan yang mengandungi hanya digit, titik perpuluhan atau gabungan kedua-duanya.

Atas ialah kandungan terperinci Bagaimana untuk Mengehadkan Input Teks HTML kepada Nilai Angka Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan