it-swarm.asia

Cara merepresentasikan input numerik yang terbatas pada peningkatan beberapa nomor

Saya memiliki persyaratan untuk formulir yang membatasi nilai bidang hingga peningkatan tetap 50 dan saya tidak yakin apa yang akan menjadi cara paling elegan untuk mewakili kendala itu dengan cara yang bermakna.

Solusi paling sederhana yang muncul dalam pikiran adalah metode memvalidasi jQuery dikombinasikan dengan beberapa logika sisi-server yang terkait dengan input bidang teks normal. Alternatif lain yang muncul dalam pikiran adalah pemetik angka dari beberapa jenis (saya tidak tahu satu saat ini) yang maju dalam kenaikan yang ditetapkan atau daftar drop-down dengan sejumlah nilai tetap.

Ada ide lain? Apa yang terasa paling intuitif bagi Anda?

14
Nathan Taylor

Saya akan menyarankan menggunakan metode yang diterapkan di Safari untuk HTML5. Seperti yang Anda lihat di sini ada tipe input baru di HTML5 yang memiliki atribut baru juga. Dalam hal ini, Anda akan menggunakan tipe input angka dengan atribut yang disebut "langkah". Kode akan terlihat seperti ini:

<input type="number" step="50" min="0" name="some_name" value="0" id="some_name" />

Saat ini tidak ada banyak browser yang melakukan hal ini. Namun, jika Anda melihat kode itu di Safari (menggunakan DOCTYPE HTML5), apa yang Anda lihat adalah bidang input teks normal dengan kontrol di samping yang menyediakan panah naik/turun yang meningkatkan nilai di dalam bidang dengan nilai "langkah" Anda ditugaskan.

Jadi, untuk elemen UI, saya akan mereplikasi untuk browser yang belum mendukungnya, panah atas/bawah di sebelah bidang input. Untuk memberi tahu pengguna bahwa Anda mengharapkan nilai tertentu, Anda bisa menulis "silakan masukkan kelipatan 50. mis: 0, 50, 100, 150, dll." Kemudian, jelas, Anda akan memerlukan kode sisi-klien atau sisi-server untuk memvalidasi bahwa angka yang dimasukkan berada dalam rentang tersebut.

9
RussellUresti

Gunakan slider. Sebagian besar pustaka UI menawarkan kontrol slider dan biasanya memberi Anda opsi untuk mendefinisikan 'langkah', seperti 50, membatasi pilihan pada kelipatan mana pun dari nilai itu.

Jika Anda menggunakan HTML5, tag input memiliki tipe "rentang" (termasuk atribut langkah) yang harus didukung oleh sebagian besar browser yang mendukung HTML5: http://dev.w3.org/html5/markup/input. range.html

7
Rahul

Apa tujuannya?

Jika terkait akuntansi/matematika/angka, saya sarankan pengganda. Jadi Anda melihat "x 50" dan ini menampilkan total. Jika itu peningkatan 50 untuk aplikasi logis, lalu mengapa tidak menggunakan "increments of 50" saja?

4
Susan R

Saya pikir yang terbaik untuk menggunakan range slider seperti yang disarankan oleh orang lain. Atau Anda dapat menggunakan fitur Autocomplete ke kotak input yang akan menampilkan saran saat pengguna mulai mengetik. Berikut adalah contoh peramban silang untuk kedua metode ini.

Slider: http://jqueryui.com/demos/slider/#range

Autocomplete: http://jqueryui.com/demos/autocomplete/

Itu sangat tergantung pada nilai min & max juga.

Saya hanya menggunakan daftar pilihan reguler untuk menunjukkan nilai yang mungkin. Dan solusi lain adalah dengan hanya menunjukkan total secara sederhana, sehingga pengguna dapat memasukkan pengganda sendiri, tetapi masih melihat hasilnya.

mockup

nduh sumber bmml - Wireframes dibuat dengan Balsamiq Mockups

1
Nick P