Cara memaksa keyboard dengan angka di situs seluler di Android

94

Saya memiliki situs versi seluler dan memiliki beberapa inputelemen HTML di dalamnya, seperti ini:

<input type="text" name="txtAccessoryCost" size="6" />

Saya telah menyematkan situs ke dalam WebViewkemungkinan konsumsi Android 2.1, sehingga itu juga akan menjadi aplikasi Android.

Apakah mungkin untuk mendapatkan keyboard dengan angka dan bukan yang default dengan huruf ketika inputelemen HTML ini difokuskan?

Atau, apakah mungkin untuk menyetelnya untuk seluruh aplikasi (mungkin sesuatu di file Manifest ), jika tidak layak untuk elemen HTML?

android html webview keyboard html-input ncakmak
sumber
Jika menginginkan keypad numerik di iOS selain Android, Anda harus melakukan ini: stackoverflow.com/a/31619311/806956
Aaron Grey
2
The inputmode="number"atribut tampaknya seperti jawaban yang benar di akhir 2019: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/... . Saran jawaban tertinggi pada saat komentar ini adalah type="number", yang datang dengan beberapa kesulitannya sendiri; inputmodetampaknya hanya memengaruhi tampilan keyboard virtual, bukan perilaku / batasan dari input itu sendiri.
SheffDoinWork

Jawaban:

114 
<input type="number" />
<input type="tel" />

Keduanya menampilkan keypad numerik saat input mendapatkan fokus.

<input type="search" /> menunjukkan keyboard normal dengan tombol pencarian tambahan

Segala sesuatu yang lain tampaknya memunculkan keyboard standar.

Richard Kernahan
sumber
Akan melihatnya hari ini, dan kemudian akan memberi tahu Anda apakah itu akan berhasil. Terima kasih, Richard!
ncakmak
1
Hai Richard. Tidak ada yang berhasil, kolom input masih membuka keyboard standar.
ncakmak
1
Daftar HTML spesifikasi tentang input types , termasuk numberdan tel.
Rory O'Kane
1
Perhatikan bahwa papan ketik untuk type="tel"lebih buruk untuk mengetik angka daripada papan ketik untuk type="number".
Rory O'Kane
2
<input type="text" pattern="\d*" /> juga menampilkan keyboard numerik, tetapi hanya di iOS, bukan di Android .
Rory O'Kane
52

CATATAN PENTING

Saya memposting ini sebagai jawaban, bukan komentar, karena ini adalah info yang agak penting dan akan menarik lebih banyak perhatian dalam format ini.

Seperti yang ditunjukkan oleh orang lain, Anda dapat memaksa perangkat untuk menampilkan keyboard numerik dengan type="number"/ type="tel", tetapi saya harus menekankan bahwa Anda harus sangat berhati-hati dengan ini.

Jika seseorang mengharapkan angka yang diawali dengan angka nol, seperti 000222, kemungkinan besar dia akan mengalami masalah, karena beberapa browser (Chrome desktop, misalnya) akan mengirim ke server 222, yang bukan itu yang dia inginkan.

Tentang type="tel"Saya tidak dapat mengatakan hal serupa tetapi secara pribadi saya tidak menggunakannya, karena perilakunya pada telepon yang berbeda dapat bervariasi. Saya telah membatasi diri pada hal-hal sederhana pattern="[0-9]*"yang tidak berfungsi di Android

pengguna907860
sumber
4
Pemformatan ulang otomatis mungkin tidak terjadi dengan type="tel". Catatan spesifikasi yang teltidak memberlakukan sintaks tertentu, tidak seperti number, yang mengharuskan nilainya menjadi bilangan floating-point yang valid .
Rory O'Kane
Seberapa buruk? Kami mencoba mempercepat proses formulir untuk pelanggan seluler kami dan ini sepertinya solusi yang jelas, tetapi kami juga menginginkan sesuatu yang dapat diandalkan. Anda memposting peringatan keras agar tidak menggunakan metode ini. Saya ingin tahu apakah Anda bisa menjelaskan lebih banyak tentang itu?
Philll_t
@Philll_t, pengguna perlu mengirim data '000222', tetapi Anda di sisi server mendapatkan '222' sebagai gantinya. Tidakkah Anda melihat bahwa fungsionalitas benar-benar rusak? Server mendapatkan data yang salah.
pengguna907860
Ya, saya mengerti maksud Anda, tapi yang saya maksud adalah: berapa persentase pengguna yang melihat ini? Apakah ini masalah di browser seluler utama seperti Safari dan Chrome? Bagaimana Anda tahu ini adalah masalah, apakah ada tautan yang dapat Anda berikan. Saya percaya Anda, saya hanya ingin meneliti diri sendiri dan belum melihat apa pun yang menyarankan hal ini, mungkin Anda dapat mengarahkan saya ke arah yang benar. Kami hanya mencoba untuk melihat apakah basis pelanggan kami tidak akan mendapat manfaat dari ini.
Philll_t
1
@Philll_t Saya rasa contoh terbaik untuk peringatan ini adalah untuk bidang masukan Tanggal Lahir. Dimana Anda perlu memasukkan hari, bulan dan tahun secara manual. Dan ya, masih banyak situs web yang menggunakan gaya ini, bukan pemilih tanggal yang umum digunakan. Mengenai masalah pada kolom input Tanggal Lahir, adalah ketika Anda memasukkan Hari atau Bulan Anda dimulai dengan "0", misalnya 08.
Robin Carlo Catacutan
9

Ini seharusnya berhasil. Tetapi saya memiliki masalah yang sama pada ponsel Android.

<input type="number" /> <input type="tel" />

Saya menemukan, bahwa jika saya tidak menyertakan kerangka kerja jquerymobile, keypad ditampilkan dengan benar pada dua jenis bidang.

Tetapi saya belum menemukan solusi untuk menyelesaikan masalah itu, jika Anda benar-benar perlu menggunakan jquerymobile.

UPDATE: Saya menemukan, bahwa jika form-tag disimpan dari

<div data-role="page">

Papan tombol angka tidak ditampilkan. Ini pasti bug ...

Jesper Grann Laursen
sumber
Terima kasih telah menggali lebih dalam ini. Saya tidak yakin saya mengerti: "jika form-tag disimpan di luar div [data-role = page]". Dalam kasus saya, masalah terjadi dengan formulir yang ditempatkan dengan baik di dalam div [data-role = page]. Mungkin masalahnya adalah halaman-halaman ini ditampilkan, dalam kasus saya, sebagai dialog?
Wytze
9

inputmodemenurut spesifikasi WHATWG adalah metode default.

Untuk perangkat iOS menambahkan patternjuga bisa membantu.

Untuk penggunaan kompatibilitas mundur typejuga sejak Chrome menggunakan ini pada versi 66.

<input
  inputmode="numeric"
  pattern="[0-9]*"
  type="number"
/>
Reza Ghorbani
sumber
1
Terima kasih atas jawabannya, saya mencari decimaldan menemukannya di sini developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…
Rami Alloush
3

Beberapa browser yang mengirimkan awalan nol ke server ketika tipe inputnya adalah "angka". Jadi saya menggunakan campuran jquery dan html untuk memuat keypad numerik dan juga memastikan bahwa nilainya dikirim sebagai teks bukan sebagai angka:

$(document).ready(function(){
$(".numberonly").focus(function(){$(this).attr("type","number")});
$(".numberonly").blur(function(){$(this).attr("type","text")});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numberonly">
Luaskan cuplikan

Ali Sheikhpour
sumber
3
Ini menyebabkan masalah yang mengganggu di Chrome untuk Android. Ketika Anda menekan pada input, keyboard tidak tidak datang. Anda kemudian harus mengetuk kotak teks untuk kedua kalinya dan kemudian keyboard muncul dengan keyboard hanya angka. Saya benar-benar berharap kami memiliki type="digits"pilihan sehingga kami tidak perlu melakukan peretasan ini. Maksud saya, itu tidak seperti angka nol di depan yang langka (Kode Pos di AS adalah contoh yang jelas).
Jaxidian
2
Saya menghadapi masalah yang sama juga! bidang pengaturan ke "type = tel" adalah solusi terbaik.
Ali Sheikhpour
-2

input type = number

Jika Anda ingin memberikan masukan angka, Anda dapat menggunakan HTML5 input type = "number" atribut value.

<input type="number" name="n" />

Berikut adalah keyboard yang muncul di iPhone 4:

Tangkapan Layar iPhone dari nomor jenis masukan HTML5 Android 2.2 menggunakan keyboard ini untuk type = number:

Screenshot Android nomor jenis masukan HTML5

avinash pandit
sumber