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

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:

1. Papan Kekunci Maya
2. 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.

`" />

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.

`" />

Notasi Saintifik

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

`" />

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.

1. Menggunakan Regex ? corak.
2. 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" 입력 유형을 사용해야 합니다.

결론

최신 HTML은 매우 훌륭한 유틸리티를 제공하므로 입력 유형 번호와 같은 일부 기능은 구현하기가 매우 사소하다고 느낄 수 있습니다. 그러나 개발자로서 우리는 항상 이러한 유틸리티와 이를 활용하여 더 나은 사용자 경험을 만들 수 있는 방법에 주의를 기울여야 합니다.

이 기사가 마음에 들었다면 반응을 남겨주시고, 마음에 들지 않았던 부분이 있다면 댓글로 피드백을 남겨주세요.

저는 기술과 기술을 둘러싼 이벤트에 대해 사람들과 소통하고 이야기하는 것을 좋아합니다. Twitter/X 및 LinkedIn에서 나와 연결할 수 있습니다.

Dev.to에서 저를 팔로우하시면 제가 새 글을 게시할 때마다 알림을 받으실 수 있습니다.

위 내용은 기초 그 이상: ``를 사용하여 전문가처럼 숫자 입력 처리하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!