Montrer le nombre de caractères restants dans une zone de texte HTML en utilisant JavaScript

vous pouvez lier la touche press event avec votre boîte de saisie et retourner false si les caractères sont plus de 160 résoudra le problème jsfiddle

JS

$('textarea').keypress(function(){

    if(this.value.length > 160){
        return false;
    }
    $("#remainingC").html("Remaining characters : " +(160 - this.value.length));
});​

HTML

<textarea></textarea>​ <span id='remainingC'></span>

inclus ci-dessous est une implémentation JS/HTML simple de travail qui met à jour les caractères restants correctement lorsque l'entrée a été supprimée.

Bootstrap et JQuery sont nécessaires pour la mise en page et la fonctionnalité pour correspondre. ( testé sur JQuery 2.1.1 selon l'extrait de code inclus).

assurez-vous d'inclure le code JS tel qu'il est chargé après le HTML. Moi un Message si vous avez des questions.

Le Code:

$(document).ready(function() {
  var len = 0;
  var maxchar = 200;

  $( '#my-input' ).keyup(function(){
    len = this.value.length
    if(len > maxchar){
        return false;
    }
    else if (len > 0) {
        $( "#remainingC" ).html( "Remaining characters: " +( maxchar - len ) );
    }
    else {
        $( "#remainingC" ).html( "Remaining characters: " +( maxchar ) );
    }
  })
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-sm-6 form-group">
    <label>Textarea</label>
    <textarea placeholder="Enter the textarea input here.. (limited to 200 characters)" rows="3" class="form-control" name="my-name" id="my-input" maxlength="200"></textarea><span id='remainingC'></span>
  </div>
</div> <!--row-->

il suffit d'enregistrer un Eventhandler sur keydown événements et vérifiez la longueur du champ de saisie sur la fonction et l'écrire dans un élément séparé.

Voir la démo.

var maxchar = 160;
var i = document.getElementById("textinput");
var c = document.getElementById("count");
c.innerHTML = maxchar;

i.addEventListener("keydown",count);

function count(e){
    var len =  i.value.length;
    if (len >= maxchar){
       e.preventDefault();
    } else{
       c.innerHTML = maxchar - len-1;   
    }
}
​

vous devriez vérifier la longueur sur votre serveur aussi, parce que Javascript peut être désactivé ou l'utilisateur veut faire quelque chose de méchant sur le but.

Comment au sujet de cette approche, qui divise le problème en deux parties:

• en utilisant jQuery, il montre un compteur de décrémentation en dessous de la textarea, qui devient rouge lorsqu'il atteint zéro, mais encore permet à l'utilisateur de type.
• j'utilise un validateur de longueur de chaîne séparé (côté serveur et côté client) pour empêcher réellement la soumission du formulaire si le nombre de chatacters dans le textarea est supérieur à 160.

Mon textarea id Message, et la span dans lequel j'affiche le nombre de caractères restants a une id counter. La classe css error s'applique lorsque le nombre de caractères restants atteint zéro.

var charactersAllowed = 160;

$(document).ready(function () {
    $('#Message').keyup(function () {
        var left = charactersAllowed - $(this).val().length;
        if (left < 0) {
            $('#counter').addClass('error');
            left = 0;
        }
        else {
            $('#counter').removeClass('error');
        }
        $('#counter').text('Characters left: ' + left);
    });
});

Essayez le code suivant par exemple:

code de travail dans jsfiddle.net

<textarea id="txtBox"></textarea>
...
...

<input type="text" id="txtBox"/>
<br>
<input type="text" id="counterBox"/>
<script>
 var txtBoxRef = document.querySelector("#txtBox");
 var counterRef = document.querySelector("#counterBox");
 txtBoxRef.addEventListener("keydown",function(){
  var remLength = 0;
  remLength = 160 - parseInt(txtBoxRef.value.length);
  if(remLength < 0)
   {
    txtBoxRef.value = txtBoxRef.value.substring(0, 160);
    return false;
   }
  counterRef.value = remLength + " characters remaining...";
 },true);
</script>

Espérons que cette Aide!

Essayez ceci

HTML

<textarea id="textarea" rows="8" cols="50" maxlength="100" ></textarea>
<div id="feedback"></div>

JS

$(document).ready(function() {
        var max = 1000;
        $('#feedback').html(max + 'characters remaining');

        $('#textarea').keyup(function() {
            var text_length = $('#textarea').val().length;
            var text_remaining = max - text_length;

            $('#feedback').html(text_remaining + ' characters remaining');
        });
    });

essayez ce code ici...ceci est fait en utilisant la fonction javascript onKeyUp ()...

<script>
function toCount(entrance,exit,text,characters) {  
var entranceObj=document.getElementById(entrance);  
var exitObj=document.getElementById(exit);  
var length=characters - entranceObj.value.length;  
if(length <= 0) {  
length=0;  
text='<span class="disable"> '+text+' <\/span>';  
entranceObj.value=entranceObj.value.substr(0,characters);  
}  
exitObj.innerHTML = text.replace("{CHAR}",length);  
}
</script>

textarea démo compteur

j'avais besoin de quelque chose comme ça et la solution que j'ai donnée avec l'aide de jquery est celle-ci:

<textarea class="textlimited" data-textcounterid="counter1" maxlength="30">text</textarea>
<span class='textcounter' id="counter1"></span>

Avec ce script:

// the selector below will catch the keyup events of elements decorated with class textlimited and have a maxlength
$('.textlimited[maxlength]').keyup(function(){
     //get the fields limit
    var maxLength = $(this).attr("maxlength");

    // check if the limit is passed
    if(this.value.length > maxLength){
        return false;
    }

    // find the counter element by the id specified in the source input element
    var counterElement = $(".textcounter#" + $(this).data("textcounterid"));
    // update counter 's text
    counterElement.html((maxLength - this.value.length) + " chars left");
});

a live demo Ici

HTML:

 <form>
  <textarea id='text' maxlength='10'></textarea>
  <div id='msg'>10 characters left</div>
  <div id='lastChar'></div>
</form>

JS:

function charCount() {
  var textEntered = document.getElementById('text').value;
  var msg = document.getElementById('msg');
  var counter = (10-(textEntered.length));
  msg.textContent = counter+' characters left';
}

var el = document.getElementById('text');
el.addEventListener('keyup',charCount,false);