Jquery ile İnput İçindeki Değeri Artırma Ve Azaltma

Jquery ile input içindeki sayısal bir değeri artırma ve azaltma işlemi yapacağız. Betonumuza tıklandığında artıracağız ya da azaltacağız.Ve de ek olarak sadece sayısal veri girmesini sağlayacağız yani numarik olmayan girişleri veri engelliyeceğiz.

HTML ve CSS kodlarını yazmıyorum tasarımıza göre siz tasarlarsınız.

Kullanıcağımız Jquery kodlarımı yazıyorum.

 $("#pls").on("click" ,function(){ 
  var adet =$("#num").val();//textimizdeki değeri alıyoruz
  if(adet < 9999){//kendim bir sınır belirledim 
  //siz kendiniz isteği doğrultusunda değiştirebilirsiniz
  adet++;
  $("#num").val(adet);//Yeni değeri gönderiyoruz
   }
 });

 $("#minus").on("click" ,function(){//yukarıdakiyle aynı işlem sadece azaltma yapıyoruz
   var adet =$("#num").val();
   if(adet > 0){//sıfırdan küçük olmasın bizim sınırımız
   adet--;
   $("#num").val(adet);
   }
 });
 $("#num").keypress(function(e){//textimize yazıldığı anda çalışmasını istiyoruz
   var regex = new RegExp("^[0-9]"); //Burada sadece rakamsal değer girilmesini istiyoruz
   var str   = String.fromCharCode(!e.charCode ? e.which : e.charCode);
   //str değişkenimize girdiğmiz char gelmektedir
   if(regex.test(str)){//gelen stringimizi test ediyoruz.
   return true;//rakamsalsa evet yaz
   }
  e.preventDefault();
  return false;//değilse yazma
 });

Ve sonucumuz