Maxlength sur textarea - limiter le nombre de caractères dans un textarea en javascript

Le 29/07/2013 à 03:54:33
Note: 4/5
Mots clés: textarea maxlength maximum caractères limiter nombre de mots javascript appliquer un maxlength sur textarea limiter le nombre de caractères dans un textarea en javascript <textarea maxlength="250">

Bonjour,
dans ce tutoriel, je vais vous montrer comment limiter le nombre de caractères que l'utilisateur peut mettre dans un textarea, ce script permet aussi d'indiquer à l'utilisateur le nombre de caractères qu'il lui reste.

Le principe est très simple, à chaque fois que l'utilisateur entre un caractère, on vérifie si son texte contient un nombre égale ou plus bas de caractère au nombre permis, si le nombre de caractère que l'utilisateur a entré est trop grand, on coupe son texte pour qu'il ne dépasse pas le nombre de caractères permis. C'est un peu comme l'attribut maxlength des champs de input text.
Et tout au long de sa rédaction, on affiche le nombre de caractères qui lui restes.

Voici le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

        <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Limiter le nombre de caractÃ¨re dans un textarea</title>

    <script type="text/javascript">

        <!--

            function maxlength_textarea(id, crid, max)

            {

                var txtarea = document.getElementById(id);

                document.getElementById(crid).innerHTML=max-txtarea.value.length;

                txtarea.onkeypress=function(){eval('v_maxlength("'+id+'","'+crid+'",'+max+');')};

                txtarea.onblur=function(){eval('v_maxlength("'+id+'","'+crid+'",'+max+');')};

                txtarea.onkeyup=function(){eval('v_maxlength("'+id+'","'+crid+'",'+max+');')};

                txtarea.onkeydown=function(){eval('v_maxlength("'+id+'","'+crid+'",'+max+');')};

            }

            function v_maxlength(id, crid, max)

            {

                var txtarea = document.getElementById(id);

                var crreste = document.getElementById(crid);

                var len = txtarea.value.length;

                if(len>max)

                {

                    txtarea.value=txtarea.value.substr(0,max);

                }

                len = txtarea.value.length;

                crreste.innerHTML=max-len;

            }

        -->

        </script>

        </head>

        <body>

    <textarea id="textarea_1" cols="35" rows="4"></textarea><br />

    Il vous reste <span id="carac_reste_textarea_1"></span> caractÃ¨res.

    <script type="text/javascript">

        <!--

            maxlength_textarea('textarea_1','carac_reste_textarea_1',150);

        -->

    </script>

        </body>

</html>

Essayer

Merci, j'espère que ce script vous a plut et qu'il vous sera utile.

Scripts et Tutoriels similaires

Se souvenir d'un visiteur Javascript - son nom et le nombre de visites script cookies

Système d'onglets en Javascript, (X)html et CSS dans la même page

Timestamp en Date - Convertir un timestamp en une date

Gestion des cookies en Javascript - document.cookie javascript get cookie set cookie

Ouvrir une nouvelle fenêtre (Pop-up) en javascript - window.open tutoriel