Aide ou plutôt question sur jquery keydown

neecride
Javascript

Bonjour,

Je souhaite avertir les utilisateurs du nombre de caractères qu'il entre dans mes formulaire, ce code juste au dessous fonctionne mais comment faire pour que la var limit soit dynamique.

si vous avez une méthode en php pur sans js je la prend, mais en attendant je ne sais pas comment faire le js c'est pas ma tasse de thé.

  //Attendre que le document soit chargé
  $(document).ready(function(){

    //La fonction s'active sur l'évènement keydown dans la zone de texte
    $("#zone").keydown(function(limit) {

      //Définir la limite à atteindre
      var limit = "500";

      //Récupérer le nombre de caractères dans la zone de texte
      var currlength = $(this).val().length;

      //Afficher un texte de légende en fonction du nombre de caractères
      if(currlength >= limit){
        $("#legende").removeClass("suffisant").addClass("insuffisant").html("Vous avez saisi " + currlength + " caractères sur " + limit + ", c'est suffisant, vous avez ateind le max.");
      }
      else{
        $("#legende").removeClass("insuffisant").addClass("suffisant").html("Vous avez saisi " + currlength + " caractères sur " + limit + "");
      }

    });
  });

Thanks

7 réponses

G1.3

Salut

Déjà tu peux retirer le limit en parametre de ta fonction. Normalement c'est l'event à ce niveau là.

Pour récupérer la limite tu peux setter un data attribute sur ta zone. Par exemple:

<textarea id="zone" data-limit="450"></textarea>

et dans ton JS, remplace limit = 500; par limit = $(this).data('limit');

Peut être besoin de le parseInt pour les calculs, à voir...

Pierrot01

une solution en html :

<textarea rows="10" cols="50" maxlength="500">

@plus
Pierre

neecride
Auteur

Merci des réponse !!

G1.3 Cette astuce marche par contre si je veut faire ça pour tous les champs ou j'ai besoin d'une limite 

$('#zone').keyup(function() {

    var nombreCaractere = $(this).val().length;
    var nombreCaractere = $(this).data('limit') - nombreCaractere;

    var nombreMots = jQuery.trim($(this).val()).split(' ').length;
    if($(this).val() === '') {
        nombreMots = 0;
    }   

    var msg = '( ' + nombreCaractere + ' Caractere(s) restant )';
    $('#legende').text(msg);
    if (nombreCaractere < 1) { 
        $('#legende').addClass("insuffisant"); 
    } else { 
        $('#legende').removeClass("insuffisant"); 
    }

  })

je suis quand même obliger de recopier le code et de le modifier sur les id sinon ça marche pas.
le code marche pour les commentaires mais pas pour les mots passe par exemple.

Pierrot01

Voilà une solution

<textarea class = "tlimit" rows="10" cols="50" maxlength="500" data-limit="500">
<textarea class = "tlimit" rows="10" cols="50" maxlength="200" data-limit="200">
<textarea class = "tlimit" rows="10" cols="50" maxlength="300" data-limit="300">
<textarea class = "tlimit" rows="10" cols="50" maxlength="150" data-limit="150">

$('.tlimit').keyup(function() {

    var nombreCaractere = $(this).val().length;
    var nombreCaractere = $(this).data('limit') - nombreCaractere;

    var nombreMots = jQuery.trim($(this).val()).split(' ').length;
    if($(this).val() === '') {
        nombreMots = 0;
    }   

    var msg = '( ' + nombreCaractere + ' Caractere(s) restant )';
    $('#legende').text(msg);
    if (nombreCaractere < 1) { 
        $('#legende').addClass("insuffisant"); 
    } else { 
        $('#legende').removeClass("insuffisant"); 
    }

  })

@plus

Pierre

neecride
Auteur

Bonjours Pierrot01 j'ai fais exactement comme tu la indiquer

ça c'est ma fonction pour mes input.

<?= input('password','Mot de pass <span id="legende"></span>',

                        [
                            'type' => 'password',
                            'placeholder' => 'password',
                            'class' => 'form-control tlimit',
                            'rows' => "10", 
                            'cols' => "50", 
                            'maxlength' => "200",
                            'data-limit' => "200",
                            'id' => 'password',
                            'style' => 'width:100%;',
                            'required' => 'required'
                        ]

                       ); 
?>

ça fonctionne que sur un seul input j'ai essayer avec ou sans ma fonction mais je suis obliger de dupliquer et modifier mon js pour que ça fonctionne.

Pierrot01

tu as bien fais :

$('.tlimit').keyup(function() {

@plus

Pierre

neecride
Auteur

Oui j'ai tout changer comme tu avais indiquer, mai j'ai vue le problème !!

c'est que mes champs description et modifier mots de passe sont sur la même page quand je veut editer les mots de passe c'est sur la description que s'affiche #legende comme ils on les même id et class alors il y a conflit.