jQuery: texte d'entrée restant contre

Question

caractères

Je suis en train d'écrire un simple compteur restant caractères pour mon backoffice input textes avec jQuery mais il ne fonctionne pas:

<script type="text/javascript"> 
$(document).ready(function(){ 

function text_counter (input_text, target) { 
    var max = $(input_text).attr("maxlength"); 
    $(input_text).keydown (function() { 
     var timer = setTimeout (function() { 
      var text = $(input_text).text(); 
      var current = text.length; 
      $(target).text(current + "/" + max); 
     }, 1); 
    }); 
}    
text_counter ("#description", "#description_counter"); 

}); 
</script> 

<input id="description" type="text" maxlength="250" value="Default text"> 
<span id="description_counter"></span> 

Si je commence à écrire à l'intérieur du input , l'élément span change en 12/250 et se fige ici (12 == "Texte par défaut" .length).

Où est-ce que je me trompe?

Answer 1

essayer d'utiliser val() au lieu du texte()

var text = $(input_text).val();

Answer 2

http://jsbin.com/epeva5/edit

Answer 3

$(function(){ 

    function text_counter (input_text, target) 
    { 
    var $input = $(input_text); 
    var $target = $(target); 
    var max = $input.attr("maxlength"); 
    var defaultText = $input.val(); 

    $(input_text).keypress(function() { 
     var val = $input.val(); 
     var len = val.length; 
     if (val == defaultText) { 
     len == 0; 
     } 
     $target.text(len + "/" + max); 
    }); 
    } 
    text_counter ("#description", "#description_counter"); 

}); 

Answer 4

C'est ma solution pour vous:

function text_counter(input_text, target) { 
    var max = input_text.attr("maxlength"); 
    input_text.keyup(function() { 
     target.text(this.value.length + "/" + max) 
    }); 
} 

text_counter($("#description"), $("#description_counter")); 

Exemple: http://jsfiddle.net/jonathon/dkWHp/

Quelques différences. Premièrement, j'utilise l'événement keyup. Sinon, vous exécutez le code avant que le caractère ne soit supprimé (c'est peut-être la raison pour laquelle vous utilisez le setTimeout) - il est également renvoyé sur un retour arrière. Je passe également les objets jQuery dans la fonction text_counter. C'était juste que vous créiez le seul sélecteur jQuery (au lieu des multiples appels $(input_text)). Dans le gestionnaire keyup, j'appelle simplement this.value.length car this est un élément d'entrée HTML et je n'ai pas besoin de déranger jQuery pour cela.

Pour faire bonne mesure, voici une autre mise en œuvre de text_counter:

function text_counter(input_text, target) { 
    var max = input_text.attr("maxlength"); 
    setInterval(function(){ 
     target.text(input_text.val().length + "/" + max) 
    }, 100); 
} 

Exemple: http://jsfiddle.net/jonathon/vZHGU/

au lieu de gérer les événements clés, je viens de mettre en place une minuterie qui définit le texte de target toutes les 100ms. Pourquoi montrer cela? Lorsque vous gérez un événement clé, il ne se déclenche qu'une seule fois. Le deuxième morceau de code que j'ai donné interrogera continuellement la longueur de la zone de texte de sorte que l'intervalle soit mis à jour même si le bouton de retour arrière est maintenu enfoncé.

Je n'aime pas la deuxième solution parce qu'elle crée un travail inutile (le setInterval fonctionnera indépendamment de l'interaction de l'utilisateur avec la boîte) mais je le montre parce que vous pouvez jouer avec les deux solutions. Par exemple, vous pouvez invoquer 5 secondes d'interrogation sur une touche ou quelque chose pour obtenir le meilleur des deux mondes :)

Answer 5

J'ai eu un problème similaire et j'ai écrit un plugin jQuery/BootStrap pour cela. Vous pouvez l'utiliser comme:

$('input.className').maxlength({ 
    threshold: 10, 
    warningClass: "label label-success", 
    limitReachedClass: "label label-important", 
    separator: ' of ', 
    preText: 'You have ', 
    postText: ' chars remaining.' 
}); 

Vous pouvez l'obtenir auprès github: http://mimo84.github.io/bootstrap-maxlength/ (vous trouverez des exemples aussi bien).