web-dev-qa-db-fra.com

Afficher le nombre de caractères restants dans une zone de texte HTML à l'aide de JavaScript

Voici mon code:

function textCounter(field, countfield, maxlimit) {
    if (field.value.length > maxlimit) {
        field.value = field.value.substring(0, 160);
        field.blur();
        field.focus();
        return false;
    } else {
        countfield.value = maxlimit - field.value.length;
    }
}

Comment puis-je afficher le nombre de caractères restants d'une certaine zone de texte avec une limite de 160?

javascripttextarea
30
ChristineS

Fonction d'élément HTML dynamique Le code dans ici avec un peu de modification et de simplification:

<input disabled  maxlength="3" size="3" value="10" id="counter">
<textarea onkeyup="textCounter(this,'counter',10);" id="message">
</textarea>
<script>
function textCounter(field,field2,maxlimit)
{
 var countfield = document.getElementById(field2);
 if ( field.value.length > maxlimit ) {
  field.value = field.value.substring( 0, maxlimit );
  return false;
 } else {
  countfield.value = maxlimit - field.value.length;
 }
}
</script>

J'espère que cela t'aides!

pointe:

Lors de la fusion des codes avec votre page, assurez-vous que les éléments HTML (textarea, input) sont chargés en premier avant les scripts (fonctions Javascript)

48
Nokia808Freak

Vous pouvez lier un événement de pression de touche avec votre zone de saisie et retourner false si les caractères sont supérieurs à 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>
29
Anoop

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

Bootstrap et JQuery sont requis pour que la mise en page et les fonctionnalités correspondent. (Testé sur JQuery 2.1.1 selon l'extrait de code inclus).

Assurez-vous d'inclure le code JS de sorte qu'il soit chargé après le code HTML. Envoyez-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-->
6
cjbrog

Enregistrez simplement un gestionnaire d'événements sur les événements keydown et vérifiez la longueur du champ de saisie de cette fonction et écrivez-le dans un élément distinct.

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 également vérifier la longueur de votre serveur, car Javascript peut être désactivé ou l'utilisateur veut faire quelque chose de méchant à dessein.

4
Christoph

Essaye ça

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');
        });
    });
2
Manjunath Akalawadi

Que diriez-vous de cette approche, qui divise le problème en deux parties:

  • En utilisant jQuery, il affiche un compteur décrémentant en dessous de textarea, qui devient rouge lorsqu'il atteint zéro mais permet toujours à l'utilisateur de taper.
  • J'utilise un validateur de longueur de chaîne séparé (côté serveur et côté client) pour empêcher la soumission du formulaire si le nombre de caractères dans le textarea est supérieur à 160.

Mon textarea a un id de Message, et le span dans lequel j'affiche le nombre de caractères restants a un id de counter. La classe css de error est appliquée 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);
    });
});
1
Richard Everett

Essayez par exemple le code suivant:

code de travail dans jsfiddle.net

Pour textArea, utilisez ceci:

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

Pour textBox, utilisez ceci:

<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>

J'espère que cela t'aides!

1
Nokia808Freak

essayez ce code ici ... cela se 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>

démo du compteur de zone de texte

0
Lucky

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

<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");
});

Α démo en direct ici

0
cnom

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);
0
Gleb Umarov