web-dev-qa-db-fra.com

Limiter le nombre de caractères dans le champ de saisie

Je veux utiliser jquery pour limiter le nombre de caractères dans un div éditable (ou une entrée de formulaire).

jqueryhtmlwebformsjquery-validate
19
Firdous

En ce qui concerne le champ de saisie, vous pouvez utiliser l'attribut maxlength. Si vous recherchez div, vérifiez les points suivants,

        $(function() {

            $ ('#editable_div').keydown ( function (e) {
                //list of functional/control keys that you want to allow always
                var keys = [8, 9, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];

                if( $.inArray(e.keyCode, keys) == -1) {
                    if (checkMaxLength (this.innerHTML, 15)) {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                }
            });

            function checkMaxLength (text, max) {
                return (text.length >= max);
            }
        });

        <div id="editable_div" contentEditable="true" onclick="this.contentEditable='true';" >TEXT BEGIN:</div>

Edit: vous devez réécrire la fonction checkMaxLength pour ignorer les tabulations et les retours à la ligne

5
Selvakumar Arumugam

utiliser la variable maxlength dans la balise input

<input type="text" maxlength="20" />
47
dku.rajkumar

Attribut Maxlength - pour navigateur, qui supporte cette fonctionnalité.
Javascript - pour les autres.

<input class="test-input" type="text" maxlength="12" />
<script>
$('.test-input').unbind('keyup change input paste').bind('keyup change input paste',function(e){
    var $this = $(this);
    var val = $this.val();
    var valLength = val.length;
    var maxCount = $this.attr('maxlength');
    if(valLength>maxCount){
        $this.val($this.val().substring(0,maxCount));
    }
}); 
</script>

http://jsfiddle.net/tvpRT/

18
Serg Hospodarets

Cela devrait fonctionner pour vous, je pense.

HTML

<input type="text" name="myText" id="myText" data-maxlength="10" />

jQuery

$('#myText').keyup(validateMaxLength);

function validateMaxLength()
{
        var text = $(this).val();
        var maxlength = $(this).data('maxlength');

        if(maxlength > 0)  
        {
                $(this).val(text.substr(0, maxlength)); 
        }
}
9
JF Paris

Si vous voulez utiliser JQuery, vous pouvez écrire quelque chose vous-même ou simplement utiliser un plugin existant tel que celui-ci .

Mais je suis d'accord avec dku.rajkumar ... Quel est le problème avec l'utilisation de l'attribut maxlength?

<input type="text" maxlength="15" />

Si vous êtes le plus grand fan de JQuery à ce jour et que vous souhaitiez désespérément définir une maxlength pour tous les champs d'entrée à la fois, procédez comme suit:

$(document).ready(function() {
   $('input[type="text"]').attr({ maxLength : 15 });
});

Gardez simplement à l'esprit que cette méthode (celle de JQuery) ne fonctionnera pas pour les personnes qui ont (pour quelque raison que ce soit) JavaScript désactivé. Alors que l'attribut maxlength de la balise input fonctionne pour tout le monde sur tous les navigateurs.

6
Jules

Disons que c'est une entrée de formulaire.
vous pouvez le faire avec l'attribut 'maxlength' mais si vous dites 'using jQuery',
voici la solution.

$('input#limited').attr('maxlength', '3');

ou vous pouvez vérifier chaque pression de touche

$('input#limited').keypress(function() {
     /*
     check for 3 or greater than 3 characters.
     If you check for only greater than 3, then it will let
     you write the fourth character because just before writing,
     it is not greater than three.
     */
     if($(this).val().length >= 3) {
        $(this).val($(this).val().slice(0, 3));
        return false;
    }
});
4
Sang

il suffit d'utiliser l'attribut appelé "maxlength". Vous pouvez en savoir plus sur les attributs d’entrée à w3 input

0
mkk