기초 그 이상: `<input type=\'number\'>`를 사용하여 전문가처럼 숫자 입력 처리하기-JS 튜토리얼-php.cn

기초 그 이상: ``를 사용하여 전문가처럼 숫자 입력 처리하기

王林

풀어 주다： 2024-09-10 11:05:01

원래의

732명이 탐색했습니다.

Apakah itu

Menurut Definisi Dokumen MDN: elemen nombor jenis digunakan untuk membenarkan pengguna memasukkan nombor. Ia termasuk pengesahan terbina dalam untuk menolak entri bukan berangka.

Jadi pada asasnya, ia adalah ciri untuk meningkatkan Pengalaman Pengguna di tapak web dan apl web kami yang buruk. Walaupun ia adalah ciri yang bagus untuk memudahkan input berangka, ia mempunyai beberapa gelagat yang mungkin tidak jelas pada mulanya tetapi kita harus sedar sebagai pembangun web.

Tingkah laku ini berkaitan dengan:

Papan Kekunci Maya
Notasi Saintifik

Papan Kekunci Maya

Papan kekunci maya ialah papan kekunci yang muncul pada skrin anda, biasanya dalam peranti input sentuhan seperti telefon mudah alih, tablet/ipad dan beberapa teknologi bantuan.

<input id="numeric-input" type="number" >

로그인 후 복사

Hanya menggunakan jenis="nombor" mungkin kelihatan baik pada mulanya, tetapi ia mempunyai masalah apabila menggunakan papan kekunci maya. Ia mungkin membuka papan kekunci kekunci penuh dan bukannya papan kekunci angka, yang boleh menjejaskan pengalaman pengguna dan ketepatan input.

Beyond Basics: Handling Numeric Inputs Like a Pro with `<input type= `" />

Mod input penyelesaian

Walaupun isu papan kekunci maya mungkin tidak berlaku pada versi OS dan penyemak imbas yang lebih baharu, adalah idea yang baik untuk menggunakan atribut mod input kerana ia membayangkan jenis data yang mungkin dimasukkan oleh pengguna semasa mengedit elemen atau elemen tersebut. kandungan.
Ini membolehkan penyemak imbas memaparkan papan kekunci maya yang sesuai untuk semua versi dan peranti, meningkatkan keseluruhan pengalaman pengguna (UX) aplikasi.

mod input boleh mempunyai banyak nilai, tetapi untuk kes penggunaan kami dengan input angka, kami harus menggunakan salah satu daripada dua nilai ini:
1.angka

<input id="numeric-input" type="number" inputmode="numeric" >

로그인 후 복사

Nombor jenis input menerima sebarang nilai rasional. Jika anda tidak menerima nilai pecahan dan hanya menerima nombor bulat, menggunakan nilai berangka harus diutamakan untuk senario sedemikian.

2.perpuluhan

<input id="numeric-input" type="number" inputmode="decimal" >

로그인 후 복사

Jika anda menerima nombor pecahan, gunakan nilai perpuluhan kerana ia akan menunjukkan papan kekunci maya yang mengandungi digit dan pemisah perpuluhan untuk tempat pengguna.

Sentiasa lebih suka menggunakan nilai perpuluhan dalam input anda melainkan anda tidak menerima nilai pecahan.

Beyond Basics: Handling Numeric Inputs Like a Pro with `<input type= `" />

Notasi Saintifik

Ramai di antara kita mungkin terlupa atau tidak tahu bahawa e atau E ialah nilai berangka yang sah dalam tatatanda saintifik.

Beyond Basics: Handling Numeric Inputs Like a Pro with `<input type= `" />

Ya, e atau E bermaksud "eksponen sepuluh" dalam tatatanda saintifik, dan digunakan untuk mewakili nilai yang sangat besar atau kecil. cth.

1e5 = 100000 
     or 
1e-5 = 0.00001

로그인 후 복사

Nombor jenis input HTML direka bentuk dengan mengambil kira fleksibiliti dan ia menyokong tatatanda saintifik ini, membenarkan kemasukan eksponen (mis., 1e5). Walaupun ini bukan isu itu sendiri dan boleh berguna dalam beberapa konteks, ia boleh menjadi masalah apabila input hanya terdiri daripada nombor asas.

Terdapat dua cara untuk mengehadkan input kepada nombor sahaja dan tidak membenarkan notasi saintifik.

Menggunakan Regex ? corak.
Menggunakan Javascript (kaedah pilihan saya).

Mencegah Gelagat Lalai Menggunakan Javascript

Dalam kebanyakan senario, saya tidak mahu pengguna memasukkan tatatanda 'e' atau 'E', kerana ia tidak diperlukan dan membenarkannya boleh menyebabkan beberapa isu yang tidak dijangka.

Terdapat banyak cara untuk mencapai ini, tetapi kaedah kegemaran saya ialah menghalang kunci 'e' atau 'E' daripada didaftarkan. Kita boleh mencapai ini menggunakan acara keydown dan preventDefault.

 element.addEventListener("keydown", (e) => {
    if (["e", "E"].includes(e.key)) {
      // you can also add "+" and "-" if you want to prevent them from being registered.
      e.preventDefault();
    }
  });

로그인 후 복사

Saya sangat menyukai kaedah ini kerana tiga sebab:

Ia memberikan mesej yang jelas kepada sesiapa yang membaca kod kami kemudian bahawa kami tidak mahu mendaftarkan kunci e atau E.
Ia juga membolehkan UX yang lebih baik kerana bukannya menukar nilai, kami tidak mendaftarkan kunci itu sendiri.
Jenis acara keydown ialah KeyboardEvent yang memberi kami akses terus kepada nilai utama yang meningkatkan DX keseluruhan penyelesaian.

Bukan Semua Input Numerik Perlu Nombor Jenis Input

Kadangkala kita secara naluri boleh mencapai nombor jenis input jika kita melihat keperluan input yang menerima input angka tetapi kadangkala nombor jenis input bukanlah penyelesaian yang tepat untuk senario sedemikian.

Beberapa contoh senario sedemikian ialah:

신용카드/직불카드: 신용/직불카드 입력 필드가 있는 경우 입력 유형 숫자를 사용하는 대신 숫자 및 직불 카드 입력 모드와 함께 입력 유형 텍스트를 사용하는 것이 좋습니다. 신용 카드 앞에 0 값이 있을 수 있고 일부 브라우저에서는 이를 허용하지 않을 수 있으므로 선호하는 방법을 사용하여 유효성을 검사합니다. 또한 일부 카드별 유효성 검사를 추가하거나 4개 숫자 그룹 사이에 공백을 허용할 수도 있습니다(카드에 인쇄된 대로). ).
우편번호: 대부분의 국가에는 숫자로 된 우편번호가 있지만 캐나다와 같은 일부 국가에는 영숫자 코드가 있을 수 있습니다. 필요에 따라 솔루션을 사용하는 것이 중요하며 입력 유형 숫자일 수 있습니다. 또는 입력 유형 텍스트.
휴대폰 번호: 항상 사용 사례에 적합한 정규식 패턴과 함께 input="tel" 입력 유형을 사용해야 합니다.