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)
});

 

 

Dodaj komentarz

2 Komentarze.

  1. Dość przydatny skrypt, jednakże nie może on nam gwarantować iż użytkownik wpisze określoną przez nas ilość znaków, np użytkownik wyłączając obsługę JavaScript’u w przeglądarce lub korzystając z dodatku Fire bug może skutecznie pozbyć się ograniczeń narzucanych przez skrypt. Przekazując dane poprzez formularz powinno się sprawdzić poprawność danych po stronie serwera np w języku PHP:

    <?php

    if (strlen($_POST['tresc'])

    aby mieć pewność że użytkownik zachowa się tak jak chcemy.

  2. Bardzo słuszna uwaga. Aby mieć pewność, że przesłana treść formularza nie będzie dłuższa niż tego oczekujemy, oczywistą sprawą jest iż należy sprawdzić poprawność przysyłanego formularza po stronie serwera, np. za pomocą PHP. Głównym zadaniem zamieszczonego tutaj skryptu jest informowanie użytkownika ‘na bieżąco’ ile tekstu może wprowadzić.

Dodaj komentarz