JavaScript Karakter Kontrolü

Yazıda JavaScript karakter sayısı bulma ve karakter sınırlama ile ilgili bilgiler yer almaktadır.

JavaScript karakter uzunluğunu bulmak için length özelliği kullanılır.

<script>
"use strict";
  var metin = "Merhaba JavaScript";

  alert(metin.length);
</script>

Bu özelliği veri giriş alanı elemanlarında da kullanabiliriz.

<textarea id="mesaj" cols="30" rows="10"></textarea>

Veri giriş alanını seçmek için document nesnesi getElementById metodunu kullanabiliriz.

Karakter sayısını bulma

Veri giriş alanlarına herhangi bir giriş yapıldığında onkeyup, onkeydown gibi olaylar gerçekleşir.

Veri giriş alanına giriş yapıldığında gerçekleşen olaya JavaScript komutları yazılarak karakter kontrolü yapılır.

<textarea id="mesaj" cols="30" rows="10"></textarea>
<p id="karakter"></p>

<script>
"use strict";
  var mesaj = document.getElementById("mesaj");
  var karakter = document.getElementById("karakter");

  mesaj.onkeyup = function() {
    karakter.innerHTML = this.value.length + " karakter";
  }
</script>

Karakter sınırlama

Veri giriş alanı karakter sınırlama işlemini JavaScript komutları kullanarak yapabiliriz.

Ancak bu JavaScript kodlarının artmasına neden olacaktır.

Bunun yerine veri giriş alanı maxlength özelliğini kullanabiliriz.

<textarea id="mesaj" cols="30" rows="10" maxlength="100"></textarea>

Kalan karakter sayısı

Kullanıcılara veri giriş alanına ne kadar karakter yazacağını bildirmek iyi bir kullanıcı deneyimi kazandırır.

Kalan karakter sayısını bulmak için bir değişkende yazılabilecek karakter sayısı belirlenir.

Veri giriş alanına yazılan karakter sayısı ile karakter sınırı her bir giriş sonrası karşılaştırılır.

Karakter sınırını aşmamışsa yazılabilecek karakter sayısı ile veri giriş alanına yazılan karakter sayısı çıkartılarak kalan karakter sayısı bulunur.

Eğer karakter sayısı aşılmışsa veri giriş alanına yazılan karakter substr veya substring fonksiyonu ile parçalanarak izin verilen karakter kadar veri giriş alanına yazılarak karakter sınırlandırılır.

<textarea id="mesaj" cols="30" rows="10"></textarea>
<p id="karakter"></p>

<script>
"use strict";
  var mesaj = document.getElementById("mesaj");
  var karakter = document.getElementById("karakter");

  var karakterSiniri = 140;

  mesaj.onkeyup = karakterKontrol;
  mesaj.onkeydown = karakterKontrol;

  function karakterKontrol() {
    var mesajUzunluk = this.value.length;

    if (karakterSiniri >= mesajUzunluk) {
      var kalan = karakterSiniri - mesajUzunluk;
      karakter.innerHTML = kalan + " karakter kaldı";

    } else {
      this.value = this.value.substr(0, karakterSiniri);
    }
  }
</script>

Diğer JavaScript karakter kontrolü, karakter değiştirme vb. uygulamaları JavaScript Dersleri bölümündeki JavaScript komutlarını kullanarak kolayca uygulayabilirsiniz.

Hayırlı günler dilerim.