Bagaimana untuk Mendapatkan Input Mentah daripada Medan Input Nombor HTML5, Walaupun Ia Tidak Sah?

Mengambil semula Input Mentah daripada Input Nombor HTML5

Dalam HTML5, elemen membolehkan pengguna memasukkan nilai berangka. Walau bagaimanapun, jika input tidak sah (cth., mengandungi aksara bukan berangka), sifat nilainya mengembalikan rentetan kosong.

Masalahnya:

Bagaimana kita boleh mendapatkan semula input mentah daripada medan, termasuk teks tidak sah?

Penyelesaian:

Walaupun spesifikasi menghalang pengambilan nilai tidak sah, tiada cara untuk menentukan sama ada input kosong atau mengandungi tidak sah teks. Oleh itu, pendekatan yang berbeza diperlukan.

Pendekatan Alternatif:

Daripada bergantung pada sifat nilai, kita boleh menggunakan pendengar peristiwa pada elemen input untuk menangkap input pengguna dalam masa nyata.

Kod Contoh:

const numberInput = document.getElementById('edQuantity');

numberInput.addEventListener('input', (event) => {
  const rawValue = event.target.value;

  if (isNaN(rawValue)) {
    // Input is invalid text; color it red
    numberInput.classList.add('error');
  } else {
    // Input is a valid number; color it green
    numberInput.classList.remove('error');
  }
});

Skrip ini melampirkan pendengar acara pada elemen yang menangkap nilai input apabila ia berubah. Ia kemudian menyemak sama ada nilai itu adalah nombor yang sah; jika tidak, ia mewarnakan input merah; jika tidak, ia mewarnakannya dengan hijau.

Nota:

Pendekatan ini membolehkan anda mendapatkan input mentah, termasuk teks tidak sah, tetapi pengesahan dan pengendalian input tidak sah adalah terpulang kepada anda.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Input Mentah daripada Medan Input Nombor HTML5, Walaupun Ia Tidak Sah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!