web-gelistirme-sc.com

Bazı sayılardaki artışlarla sınırlı sayısal bir giriş nasıl temsil edilir

Bir alan değerini 50'lik sabit artışlarla sınırlayan bir form için bir gereksinimim var ve bu kısıtlamayı anlamlı bir şekilde temsil etmenin en zarif yolunun ne olacağından emin değilim.

Akla gelen en basit çözüm, normal metin alanı girişine bağlı bazı sunucu tarafı mantığı ile birlikte bir jQuery doğrulama yöntemidir. Akla gelen diğer alternatifler, ayarlanmış artışlarla veya sabit sayıda değer içeren bir açılır listede ilerleyen bir çeşit (şu anda bir tane bilmiyorum) sayı seçicisidir.

Başka fikir var mı? Sizin için en sezgisel olan nedir?

14
Nathan Taylor

HTML5 için Safari'de uygulanan yöntemi kullanmanızı öneririm. Gördüğünüz gibi here HTML5'te yeni özelliklere sahip yeni giriş türleri de var. Bu durumda, "step" adında bir özniteliğe sahip bir girdi türü numarası kullanırsınız. Kod şöyle görünecektir:

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

Şu anda bununla bir şey yapan çok fazla tarayıcı yok. Ancak, bu kodu Safari'de görüntülerseniz (HTML5 doktipi kullanarak), gördüğünüz şey, alandaki değeri "adım" değeriyle artıran yukarı/aşağı oklar sağlayan bir kontrol içeren normal bir metin giriş alanıdır. tayin ettiniz.

Bu nedenle, bir kullanıcı arayüzü öğesi için, henüz desteklemeyen tarayıcılar için, giriş alanının yanındaki yukarı/aşağı okunu çoğaltırım. Kullanıcılara belirli bir değer beklediğinizi bildirmek için "lütfen 50'nin katlarını girin. Örn: 0, 50, 100, 150 vb." Ardından, girilen numaranın bu aralıklar dahilinde olduğunu doğrulamak için açıkçası, istemci tarafı veya sunucu tarafı koduna ihtiyacınız olacaktır.

9
RussellUresti

Bir kaydırıcı kullanın. Çoğu UI kütüphanesi kaydırıcı kontrolleri sunar ve genellikle seçimi 50 gibi bir 'adım' tanımlama seçeneği sunar ve seçimi bu değerin herhangi bir katıyla sınırlar.

HTML5 kullanıyorsanız, giriş etiketinde, HTML5'i destekleyen çoğu tarayıcının desteklemesi gereken bir "aralık" türü (adım özniteliği dahil) bulunur: http://dev.w3.org/html5/markup/input. range.html

7
Rahul

Amaç ne?

Eğer muhasebe/matematik/sayılarla ilgiliyse, çarpan öneririm. Yani bir "x 50" görürsünüz ve toplamı görüntüler. Mantıksal bir uygulama için 50'lik bir artışlar varsa, neden sadece "50'lik artışları" kullanmıyorsunuz?

4
Susan R

Başkaları tarafından önerilen bir aralık kaydırıcısı kullanmak için en iyi olduğunu düşünüyorum. Veya bir kullanıcı kutusuna yazmaya başladığında öneriyi görüntüleyecek bir giriş kutusuna Otomatik Tamamlama özelliğini kullanabilirsiniz. İşte bu yöntemlerin her ikisi için çapraz tarayıcı örneği.

Kaydırıcı: http://jqueryui.com/demos/slider/#range

Otomatik Tamamlama: http://jqueryui.com/demos/autocomplete/

Gerçekten de min ve maks değerlerine bağlıdır.

Olası değerleri göstermek için sadece normal bir seçim listesi kullandım. Ve başka bir çözüm, toplamı basit bir şekilde göstermektir, böylece kullanıcı çarpanın kendisini girebilir, ancak yine de sonucu görebilir.

mockup

bmml kaynağını indirin - Balsamiq Maketleri ile oluşturulan tel kafesler

1
Nick P