input type number yukarı aşağı ok butonu özelliğini kaldırma

05-08-2019, 16:08:27

Type=number olan inputumda üst ok ve alt ok tuşlarına basıldığında Sayıyı Azaltmasını veya arttırmasını istemiyorum bunu nasıl yapabilirim css ile butonlarını kaldırdım ama ok tuşları hala çalışıyor

05-08-2019, 16:10:53

#2

Developer

CSS'te input'u seçip aşağıda ki kodu verin :

selector {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
}

05-08-2019, 16:12:49

#3

Jtreix

Kimlik doğrulama veya yönetimden onay bekliyor.

Merhaba,

.classAdi::-webkit-inner-spin-button,
.classAdi::-webkit-outer-spin-button {
  -webkit-appearance: none;   margin: 0;
}

.classAdi yazan yere HTML elementin sınıfını, id sini ya da nasıl select atmak istiyorsanız o şekilde girebilirsiniz, eğer sitenin tamamında devre dışı bırakacak iseniz;

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {  
  -webkit-appearance: none;   margin: 0; 
}

şeklinde kullanabilirsiniz.

05-08-2019, 16:18:51

#4

hares

Jtreix adlı üyeden alıntı: mesajı görüntüle

Merhaba,

.classAdi::-webkit-inner-spin-button,
.classAdi::-webkit-outer-spin-button {
  -webkit-appearance: none;   margin: 0;
}

.classAdi yazan yere HTML elementin sınıfını, id sini ya da nasıl select atmak istiyorsanız o şekilde girebilirsiniz, eğer sitenin tamamında devre dışı bırakacak iseniz;

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {  
  -webkit-appearance: none;   margin: 0;
}

şeklinde kullanabilirsiniz.

burak2yilmaz adlı üyeden alıntı: mesajı görüntüle

CSS'te input'u seçip aşağıda ki kodu verin :

selector {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
}

Denediğim Kodla Aynı Kod Bunlar İnputun içindeki butonları gisliyor ama ok tuşlarıyla hala arttırılıp azaltılabiliyor

05-08-2019, 16:32:58

#5

Jtreix

hares adlı üyeden alıntı: mesajı görüntüle

Denediğim Kodla Aynı Kod Bunlar İnputun içindeki butonları gisliyor ama ok tuşlarıyla hala arttırılıp azaltılabiliyor

O dediğinizi CSS ile değil ile javascript ile yazabilirsiniz, jQuery kullanıyor iseniz;

$(document).keydown(function(e) {
if (e.which === 38 || e.which == 40) e.preventDefault();
});

kodunu jQuery tanımladığınız tagin altında <script></script> tagleri içerisine yerleştirmeniz durumunda tüm sitede yukarı ve aşağı okların kullanımını engeller.
Eğer sitenizdeki inputların (number olanlar) tamamında engellemek isterseniz;

$('[type="number"]').keydown(function(e) {
     if (e.which === 38 || e.which == 40) e.preventDefault();
});

veya dilerseniz $( BURAYA ) istediğiniz selectoru yazabilirsiniz, iyi günler dilerim.

05-08-2019, 16:38:19

#6

hares

Jtreix adlı üyeden alıntı: mesajı görüntüle

O dediğinizi CSS ile değil ile javascript ile yazabilirsiniz, jQuery kullanıyor iseniz;

$(document).keydown(function(e) {
if (e.which === 38 || e.which == 40) e.preventDefault();
});

kodunu jQuery tanımladığınız tagin altında <script></script> tagleri içerisine yerleştirmeniz durumunda tüm sitede yukarı ve aşağı okların kullanımını engeller.
Eğer sitenizdeki inputların (number olanlar) tamamında engellemek isterseniz;

$('[type="number"]').keydown(function(e) {
     if (e.which === 38 || e.which == 40) e.preventDefault();
});

veya dilerseniz $( BURAYA ) istediğiniz selectoru yazabilirsiniz, iyi günler dilerim.

Ben Zaten Bu Yöntemi Kullanarak Yapmayı Düşünüyordum Ama Belki Farklı Bir Kısayol Vardır Diye Düşünmüştüm Yardımınız İçin Teşekkür Ederim

05-08-2019, 16:49:14

#7

Jtreix

hares adlı üyeden alıntı: mesajı görüntüle

Ben Zaten Bu Yöntemi Kullanarak Yapmayı Düşünüyordum Ama Belki Farklı Bir Kısayol Vardır Diye Düşünmüştüm Yardımınız İçin Teşekkür Ederim

Rica ederim hocam, kolay gelsin.