Input - Textarea Karakter Sınırı

4
closed
omergulcicek
omergulcicek
Posted 4 years ago

Input - Textarea Karakter Sınırı #19

Input ve textarea'larda belirlenen sınır geçildiği zaman border-bottom rengi kırmızı olacak. Belirlenen sınırın aşağısına inildiğinde renk tekrar turkuaz haline dönüşecek.

Detaylar

  • Sınır aşıldığında border #44336 rengine dönüşecek.
  • tr-alan kapsayıcısının içerisine bir span eklenerek, her karakter girişinde kaç karakter olduğu ve üst sınır görünecek. (5/10 gibi)
  • jQuery kullanılmayacak, saf JavaScript kodları ile geliştirilecek.

Geliştirilecek Taslak

https://codepen.io/omergulcicek/pen/bryroR

ismail0234
ismail0234
Created 4 years ago
var karakterKontrol = function(e){

	// max karakter default
	var uzunluk = 7;

	if(typeof this.getAttribute("data-uzunluk") != "undefined" && this.getAttribute("data-uzunluk") != "")
	{

		uzunluk = this.getAttribute("data-uzunluk");

	}


	if(this.value.length > uzunluk)
	{
		//sınır aşılınca yapılacak işlemler


	}
	
};

var allelement = document.getElementsByClassName('sinirkarakter');

if(allelement.length > 0)
{

	var maxelement =  allelement.length;

	for(var i = 0; i < maxelement; i++)
	{

		allelement[i].addEventListener('input', karakterKontrol);

	}

}

bunun üzerinden devam edebilirsiniz

omergulcicek
omergulcicek
Created 4 years ago

@ismail0234 tarafından geliştirildi.

Düzenlemeler

  • Varsayılan uzunluğa gerek yok. input'ta data-uzunluk varsa o değer kullanılacak, yok ise kullanılmayacak. Haliyle varsayılana 7 değerini vermek gereksiz, kaldırabiliriz.

  • Maxlenght olayınıda kaldıralım eskisi gibi sınır aşılınca kırmızılaşması yeterli. Bu haliyle sınır aşılmadığı için kırmızı border gelmiyor.

  • span.sinirasildi'yi html tarafından elle girdirmeyelim, kod tarafından otomatik input'un kardeşi olarak ekleyebilir. (Tüm input'lar tr-alan kapsayıcısının içerisinde. Bu span'ı JS tarafından oluşturup, kod tarafından eklettirelim.)

  • Input'a sinirkarakter sınıfını da eklemeyelim. Html tarafından bi div/sınıf ekleme olmadan bu işlemlerin tamamını JS tarafında yapalım. Sınıfsız yapılabilirse o şekil yapalım, illa sınıf kullanılacaksa Turkuaz Css'in sınıf yapısına uyumlu olması açısından sınıf adını tr-input-karakter yapabiliriz. (Turkuaz Css'te çoğu sınıfın başında tr- var.)

Ellerine sağlık.

ismail0234
ismail0234
Created 4 years ago
var karakterKontrol = function(event){

    var uzunluk = this.getAttribute("data-uzunluk");
    var span    = this.parentNode.getElementsByTagName("span")[0];

    if(typeof span == "undefined")
    {

        span = document.createElement("span");
        this.parentNode.appendChild(span);
        
    }

    span.innerHTML = this.value.length  + '/' + uzunluk;

    if(this.value.length > uzunluk)
    {

        this.style["border-bottom-color"] = '#F44336';

    }
    else
    {
        
        this.style["border-bottom-color"] = '#03968a';  

    }
    
};

var allelement = document.querySelectorAll('[data-uzunluk]');

if(allelement.length > 0)
{

    var maxelement =  allelement.length;

    for(var i = 0; i < maxelement; i++)
    {

        allelement[i].addEventListener('input', karakterKontrol);

    }

}

classlar ve span kaldırıldı data-uzunluk bulunan bütün inputlarda bu özellikleri otomatik getiriyor

omergulcicek
omergulcicek
Created 4 years ago

@ismail0234 tarafından tamamlandı.