Bagaimana untuk Mengehadkan Input Teks HTML untuk Hanya Menerima Nilai Angka Menggunakan JavaScript?

Cara Mengehadkan Input Teks HTML untuk Membenarkan Input Numerik Sahaja

Untuk melaksanakan input angka sahaja dalam medan input teks HTML, anda boleh menggunakan fungsi setInputFilter JavaScript. Fungsi ini menapis nilai input secara menyeluruh dengan menyokong:

• Operasi Salin dan Tampal
• Operasi Seret dan Lepas
• Pintasan papan kekunci
• Tindakan menu konteks
• Kunci tidak boleh ditaip
• Caret kedudukan
• Reka letak papan kekunci yang berbeza
• Mesej ralat kesahihan
• Keserasian dengan semua penyemak imbas kembali ke IE 9

Kod JavaScript:

// Restricts input for the given textbox to the given inputFilter function.
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)) {
        // Accepted 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")) {
        // Rejected value: restore the previous one.
        this.classList.add("input-error");
        this.setCustomValidity(errMsg);
        this.reportValidity();
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        // Rejected value: nothing to restore.
        this.value = "";
      }
    });
  });
}

Menggunakan Fungsi:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp.
}, "Only digits and '.' are allowed");

Dalam contoh ini, fungsi setInputFilter digunakan pada elemen "myTextBox" untuk membenarkan nilai angka sahaja. Fungsi inputFilter menggunakan ungkapan biasa untuk memastikan bahawa input hanya terdiri daripada digit atau titik perpuluhan.

Nota Penting:

• Pelayan- Pengesahan Sisi: Ambil perhatian bahawa pengesahan pihak klien tidak mencukupi. Anda juga mesti melakukan pengesahan bahagian pelayan untuk pengendalian input yang selamat.
• Buat Asal Tindanan: Penyelesaian ini memecahkan kefungsian buat asal dengan menetapkan nilai secara langsung. Oleh itu, Ctrl Z tidak akan berfungsi untuk input yang tidak sah.
• Penyesuaian Gaya: Anda boleh menggunakan gaya pada kelas "input-error" mengikut keperluan.

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