Kategoria Archiwum: JavaScript

Skrypt Ograniczający Ilość Wpisanych Znaków w textarea

Zamieszczając formularz na stronie www i oddając go do dyspozycji użytkownikom odwiedzającym witrynę, nie rzadko wypadało by ograniczyć długość wprowadzanego tekstu w polu textarea, bądź też input, aby użytkownik przekazał nam zwięźle informacje bez niepotrzebnych opisów, których tak naprawdę nikomu nie chce się później czytać.

Oto prosty skrypt ograniczający ilość wpisywanych znaków w wybranym przez nas polu:

function countTextareaSigns(textAreaID, counterID, maxLength){
    var txtArea = document.getElementById(textAreaID);
    var counter = document.getElementById(counterID);
    var txtValue, txtLength;

    //sprawdzenie czy na stronie znajdują się elementy o podanych ID
    if(txtArea && counter){

        //sprawdzenie czy maksymalna ilość znaków nie jest wprowadzona w postaci 'string'
        if(typeof maxLength == 'string'){
            maxLength = parseInt(maxLength);
        }

        //inicjacja wartości pola 'counter'
        counter.innerHTML = maxLength - txtArea.value.length;

        //sprawdzenie długości tekstu przy wpisywaniu nowego zanku
        addEvt(txtArea, 'keydown', function(){
            txtValue = txtArea.value;
            txtLength = txtValue.length

            if(txtLength > maxLength){
                txtArea.value = txtValue.substr(0, maxLength);
            }
            counter.innerHTML = maxLength - txtArea.value.length;
        });

        //sparawdzenie długości tekstu po wpisaniu nowego znaku
        addEvt(txtArea, 'keyup', function(){
            txtValue = txtArea.value;
            txtLength = txtValue.length

            if(txtLength > maxLength){
                txtArea.value = txtValue.substr(0, maxLength);
            }
            counter.innerHTML = maxLength - txtArea.value.length;
        });

        //sprawdzenie długości tekstu w chwili gdy nastąpi zmiana w polu (istotne podczas wklejania tekstu)
        addEvt(txtArea, 'change', function(){
            txtValue = txtArea.value;
            txtLength = txtValue.length

            if(txtLength > maxLength){
                txtArea.value = txtValue.substr(0, maxLength);
            }
            counter.innerHTML = maxLength - txtArea.value.length;
        });
    }
}

//funkcja dodająca obsługę zdarzeń niezależnie od rodzaju przeglądarki (cross browser event listener)
function addEvt(element, evt, funct){
    if(element.addEventListener){
        return element.addEventListener(evt, funct, false);
    }
    if(element.attachEvent){
        return element.attachEvent('on'+evt, funct);
    }
}

//inicjacja skryptu na stronie przy załadowaniu strony
addEvt(window, 'load', function(){
    countTextareaSigns('my_textarea', 'my_counter', 50)
});