5.00 / 1 oy

HTML input olarak bootstrap-input-spinner kullanmak

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

zirzop

14.04.2021 12:12

Bu soru henüz yanıtlanmamış.

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
HTML input olarak bootstrap-input-spinner kullanmak

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.