JQuery Kalan Karakter Bulma

Twitterda dikkatinizi çekmiştir. Klavyeden tuşlara bastığımızda karakter sayısı 250 den aşağı doğru düşmektedir. Yada yazdığımız karakterleri sildiğimizde de yine artmaktadır. Bu uygulamada twitter uygulamasındaki gibi karakter sayma uygulaması yapılmıştır.

Uygulama jquery kullanılanarak yapıldığı için ilk olarak jquery kütüphanesini dahil etmeniz gerekiyor. Sonraki adımlarda script etiketleri arasında adım adım gösterilmiştir. Uygulamamızda textarea nesnesine en fazla 30 karakter giriş yapılabilcek ve kalan karakter sayısı gösterilecektir.

Örneğimizi 2 farklı yöntem kullanarak gerçekleştireceğiz.

Jquery ile karakter sayma uygulması kodları ve ekran çıktısı.

İçindekiler

1.Yöntem:


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

    Mesajınız : <br>
    <textarea rows="10" id="yazi"></textarea>
    <div id="sonuc"></div>
<script>
        $(document).ready(function(){
            $("#yazi").on('input',function(e){

        var maksimum=30;
        $("#yazi").focus();
        $("#yazi").val($("#yazi").val().substr(0,maksimum));
        var kalanKarakter= maksimum-$(this).val().length;
        $("#sonuc").text('Kalan Karakter : '+kalanKarakter);
  
        });
        });
    </script>
    
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Mesajınız : <br>

$(document).ready(function(){

$("#yazi").on('input',function(e){

var maksimum=30;

$("#yazi").focus();

$("#yazi").val($("#yazi").val().substr(0,maksimum));

var kalanKarakter= maksimum-$(this).val().length;

$("#sonuc").text('Kalan Karakter : '+kalanKarakter);

});

</script>

</body>

</html>

Ekran Çıktısı:

2.Yöntem:


<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <title>Jquery Örnekler</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <input type="text" id="t1" maxlength="30"><br>
  <div id="d1"></div>


      <script>
    //Kaç karakter kaldığını yazsın...
    $(document).ready(function() {
        var enfazla = $("#t1").attr("maxlength");
        $("#t1").on("keyup",function(){
          var yazi =$("#t1").val();
          $("#d1").html(enfazla-yazi.length);
        });
    });
  </script>
</body>
</html>