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

Membenarkan Hanya Input Angka dalam Input Teks HTML

Pengenalan

Input teks HTML membenarkan pengguna untuk menaip teks, tetapi bagaimana jika anda mahu mengehadkan input kepada nombor sahaja? Ini berguna untuk mengumpul data seperti nombor akaun atau PIN.

Penyelesaian JavaScript

Salah satu cara untuk mencapainya ialah melalui JavaScript. Berikut ialah fungsi JavaScript yang menapis aksara bukan angka:

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 Penyelesaian

Untuk menggunakan fungsi ini, anda boleh menghantar fungsi kepada setInputFilter yang menyemak sama ada input adalah angka:

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

Ini akan menyekat medan input teks numericInput untuk menerima sahaja aksara angka (dan titik perpuluhan).

Nota

Ingat untuk menggunakan kelas CSS ralat input untuk menggayakan medan input apabila nilai yang tidak sah dimasukkan.

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