Telepon: keyboard numerik untuk input teks

Apakah ada cara untuk memaksa keyboard nomor muncul di telepon untuk <input type="text">? Saya baru menyadari bahwa <input type="number">dalam HTML5 adalah untuk "angka floating-point", jadi tidak cocok untuk nomor kartu kredit, kode ZIP, dll.

Saya ingin meniru fungsi keyboard numerik dari <input type="number">, untuk input yang mengambil nilai numerik selain angka floating-point. Apakah ada, mungkin, inputjenis lain yang sesuai yang melakukan itu?

Anda bisa melakukannya <input type="text" pattern="\d*">. Ini akan menyebabkan keyboard angka muncul.

Lihat di sini untuk detail lebih lanjut: Panduan Pemrograman Teks, Web, dan Pengeditan untuk iOS

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

Pada pertengahan 2015, saya percaya ini adalah solusi terbaik:

<input type="number" pattern="[0-9]*" inputmode="numeric">

Ini akan memberi Anda tombol angka di Android dan iOS:

Ini juga memberi Anda perilaku desktop yang diharapkan dengan tombol panah atas / bawah dan penambahan tombol panah naik / turun ramah keyboard:

Cobalah dalam cuplikan kode ini:

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

Dengan menggabungkan keduanya type="number"dan pattern="[0-9]*, kami mendapatkan solusi yang berfungsi di mana-mana. Dan, forward-nya kompatibel dengan inputmodeatribut HTML 5.1 yang diusulkan di masa depan .

Catatan: Menggunakan pola akan memicu validasi formulir asli browser. Anda dapat menonaktifkan ini menggunakan novalidateatribut, atau Anda dapat menyesuaikan pesan kesalahan untuk validasi yang gagal menggunakan titleatribut.

Jika Anda harus dapat memasukkan nol, koma, atau huruf terkemuka - misalnya, kode pos internasional - lihat varian kecil ini .

Kredit dan bacaan lebih lanjut:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios- tombol angka/

Saya telah menemukan bahwa, setidaknya untuk bidang-bidang "passcode", melakukan sesuatu seperti pada <input type="tel" />akhirnya menghasilkan bidang yang berorientasi nomor paling otentik dan juga memiliki manfaat tanpa autoformatting . Misalnya, dalam aplikasi seluler yang saya kembangkan untuk Hilton baru-baru ini, saya akhirnya menggunakan ini:

... dan klien saya sangat terkesan.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

Menggunakan type="email"atau type="url"akan memberi Anda papan ketik pada beberapa ponsel setidaknya, seperti iPhone. Untuk nomor telepon, Anda bisa menggunakan type="tel".

Ada bahaya dengan menggunakan <input type="text" pattern="\d*">untuk memunculkan keyboard numerik. Pada firefox dan chrome, ekspresi reguler yang terdapat dalam pola menyebabkan browser memvalidasi input ke ekspresi itu. kesalahan akan terjadi jika tidak cocok dengan pola atau dibiarkan kosong. Waspadai tindakan yang tidak diinginkan di browser lain.

<input type="text" inputmode="numeric">

Dengan Inputmode Anda dapat memberikan petunjuk ke browser.

Saya pikir type="number"yang terbaik untuk halaman web semantik. Jika Anda hanya ingin mengganti keyboard, Anda dapat menggunakan type="number"atau type="tel". Dalam kedua kasus, iPhone tidak membatasi input pengguna. Pengguna masih dapat mengetik (atau menempelkan) karakter apa pun yang diinginkannya. Satu-satunya perubahan adalah keyboard yang ditampilkan kepada pengguna. Jika Anda ingin pembatasan apa pun di luar ini, Anda perlu menggunakan JavaScript.

Bagi saya solusi terbaik adalah:

Untuk angka integer, yang memunculkan pad 0-9 di android dan iphone

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />

Anda juga mungkin ingin melakukan ini untuk menyembunyikan pemintal di firefox / chrome / safari, sebagian besar klien berpikir mereka terlihat jelek

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }

Dan tambahkan novalidate = 'novalidate' ke elemen formulir Anda, jika Anda melakukan validasi khusus

Ps kalau-kalau Anda benar-benar ingin angka floating point setelah semua, langkah ke presisi apa pun yang Anda suka, akan menambahkan '.' ke android

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />

Tahun 2018:

<input type="number" pattern="\d*">

bekerja untuk Android dan iOS.

Saya menguji pada Android (^ 4.2) dan iOS (11.3)

Anda dapat mencoba seperti ini:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

Tapi hati-hati: Jika input Anda mengandung sesuatu selain nomor, itu tidak akan dikirim ke server.

Saya tidak dapat menemukan jenis yang paling cocok untuk saya dalam semua situasi: Saya perlu default ke entri numerik (entri "7.5" misalnya) tetapi juga pada waktu-waktu tertentu mengizinkan teks ("pass" misalnya). Pengguna menginginkan keypad numerik (entri 7,5 misalnya) tetapi entri teks sesekali diperlukan ("lulus" misalnya).

Alih-alih apa yang saya lakukan adalah menambahkan kotak centang ke formulir dan memungkinkan pengguna untuk beralih input saya (id = "inputSresult") antara type = "number" dan type = "text".

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

Kemudian saya mengirimkan handler klik ke kotak centang yang mengubah jenis antara teks dan nomor berdasarkan apakah kotak centang di atas dicentang:

$(document).ready(function () {
    var cb = document.getElementById('cbAllowTextResults');
    cb.onclick = function (event) {
        if ($("#cbAllowTextResults").is(":checked"))
            $("#result").attr("type", "text");
        else
            $("#result").attr("type", "number");

    }
});

Ini bekerja dengan baik untuk kita.

 <input type="text" inputmode="decimal">

itu akan memberi Anda input teks menggunakan tombol angka

coba ini:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

lihat: https://answers.laserfiche.com/questions/88002/Gunakan-number-field-input-type-with-Field-Mask