Melebihi Asas: Mengendalikan Input Numerik Seperti Pro dengan ``

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:

• Kad Kredit/Kad Debit: Apabila kita mempunyai medan input untuk Kad Kredit/Debit, daripada menggunakan nombor jenis input adalah lebih baik untuk menggunakan teks jenis input dengan mod input angka dan pengesahan menggunakan kaedah pilihan anda, kerana kad kredit boleh mempunyai nilai sifar pendahuluan dan sesetengah penyemak imbas mungkin tidak membenarkannya, juga kami mungkin mahu menambah beberapa pengesahan khusus kad atau membenarkan jarak antara kumpulan empat nombor (kerana ia dicetak pada kad ).

• Kod Pos: Walaupun kebanyakan negara mempunyai kod pos berangka, sesetengah negara seperti Kanada mungkin mempunyai kod abjad angka, adalah penting untuk menggunakan penyelesaian mengikut keperluan anda, ia mungkin nombor jenis input atau teks jenis input.

• Nombor Mudah Alih: Anda hendaklah sentiasa menggunakan jenis input input="tel" dengan corak regex yang sesuai untuk bekas penggunaan anda.

Kesimpulan

Memandangkan HTML moden menyediakan beberapa utiliti yang sangat bagus, beberapa perkara mungkin terasa sangat remeh untuk dilaksanakan seperti nombor jenis input, namun sebagai pembangun, kami harus sentiasa memberi perhatian kepada utiliti ini dan cara kami boleh menggunakannya untuk mencipta pengalaman pengguna yang lebih baik.

Jika anda menyukai artikel ini sila tinggalkan reaksi dan jika anda tidak menyukai sesuatu, anda boleh tinggalkan maklum balas anda dalam ulasan.

Saya suka berhubung dan bercakap dengan orang ramai tentang teknologi dan peristiwa di sekelilingnya. Anda boleh berhubung dengan saya di Twitter/X dan LinkedIn.

Anda juga boleh mengikuti saya di Dev.to untuk mendapatkan pemberitahuan setiap kali saya menerbitkan artikel baharu.

Atas ialah kandungan terperinci Melebihi Asas: Mengendalikan Input Numerik Seperti Pro dengan ``. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!