HTML'de sadece sayısal değerleri yazdırdığımız number input'lar hakkında iki yazı paylaşmıştım. Bu yazı da number input olarak kullanabileceğimiz bir eklenti olan bootstrap-input-spinner'dan bahsedeceğim.
bkz: HTML'de number input'a klavye girişini engellemek
bkz: HTML number input ile sayıları küsuratlı göstermek
number input'lar çok kullanışlı ve kodlaması kolay olsa da bootstrap sitelerde kullanıldığında mobil görünümünde sayı artırma ve azaltma botonları görünmediği için (spinner buton) böyle bir plug-in bulmam gerekti ve iyi ki de gerekmiş, çünkü çok daha kullanışlı ve görsel bir eklenti bulmuş oldum.
bootstrap-input-spinner'ın tüm özelliklerini kendi github sayfasından da incelemenizi öneririm. Github'dan indireceğiniz src klasörünü projenize ekledikten sonra aşağıdaki kodları sayfanıza eklemeniz yeterli (alttaki kod ile type özelliği number olan tüm input'lar otomatik olarak bootstrap-input-spinner'a dönüşür):
<script src="js/input-spinner.js"></script>
<script>
$("input[type='number']").inputSpinner();
</script>
Örneğin tamsayılardan oluşan bir number input eklemek istediğinizde aşağıdaki gibi tek satırlık HTML kodunu yazmanız yeterli.
<input type="number" value="10" min="0" max="100" step="1"/>
Buradaki özelliklerin anlamları:
value: default değer (sayfa ilk açıldığında görünecek değer)
min: en küçük izin verilen değer
max: en büyük izin verilen değer
step: artış/azalış basamakları
Not 1: Küsuratlı değerler girebilmek isterseniz data-decimals özelliğini de eklemelisiniz. Örneğin: data-decimals="2"
Not 2: Kullanıcının klavye ile girişini engellemek için ise keyboardStepping özelliğini false olarak güncelleyebilirsiniz.
Editör editi: benzer başlıklar için;
bkz: CSS'te tek seferde tüm HTML elemanlarını seçmek
bkz: CSS'te Etiket Seçicileri ile HTML Elemanlarını Seçmek
bkz: CSS'te Class Seçicileri ile HTML Elemanlarını Seçmek
bkz: CSS'te ID Seçicileri ile HTML Elemanlarını Seçmek
bkz: Html ve Css ile bütün internet sitesini siyah beyaz yapmak