web-dev-qa-db-fra.com

Compter les caractères textarea

Je développe un nombre de caractères pour mon textarea sur ce website . À l'heure actuelle, NaN est indiqué, car il ne semble pas trouver la longueur du nombre de caractères dans le champ, qui est 0 au début, donc 500. Aucune erreur ne s'est produite dans la console des outils de développement de Chrome. Tout mon code est sur le site, j'ai même essayé d'utiliser jQuery un JavaScript standard pour le nombre de caractères du champ textarea, mais rien ne semble fonctionner.

Dites-moi ce qui ne va pas dans jQuery et dans le code JavaScript de mon fichier contact.js.

$(document).ready(function() {
    var tel1 = document.forms["form"].elements.tel1;
    var tel2 = document.forms["form"].elements.tel2;
    var textarea = document.forms["form"].elements.textarea;
    var clock = document.getElementById("clock");
    var count = document.getElementById("count");

    tel1.addEventListener("keyup", function (e){
        checkTel(tel1.value, tel2);
    });

    tel2.addEventListener("keyup", function (e){
        checkTel(tel2.value, tel3);
    });

    /*$("#textarea").keyup(function(){
        var length = textarea.length;
        console.log(length);
        var charactersLeft = 500 - length;
        console.log(charactersLeft);
        count.innerHTML = "Characters left: " + charactersLeft;
        console.log("Characters left: " + charactersLeft);
    });​*/

    textarea.addEventListener("keypress", textareaLengthCheck(textarea), false);
});

function checkTel(input, nextField) {
    if (input.length == 3) {
        nextField.focus();
    } else if (input.length > 0) {
        clock.style.display = "block";
    } 
}

function textareaLengthCheck(textarea) {
    var length = textarea.length;
    var charactersLeft = 500 - length;
    count.innerHTML = "Characters left: " + charactersLeft;
}
javascriptjqueryhtmltextareacharactercount
26
Ilan Biala
$("#textarea").keyup(function(){
  $("#count").text($(this).val().length);
});

Ce qui précède fera ce que vous voulez. Si vous voulez faire un décompte, changez-le en ceci:

$("#textarea").keyup(function(){
  $("#count").text("Characters left: " + (500 - $(this).val().length));
});

Sinon, vous pouvez accomplir la même chose sans jQuery en utilisant le code suivant. (Merci @Niet)

document.getElementById('textarea').onkeyup = function () {
  document.getElementById('count').innerHTML = "Characters left: " + (500 - this.value.length);
};
64
Andrew Hubbs
textarea.addEventListener("keypress", textareaLengthCheck(textarea), false);

Vous appelez textareaLengthCheck et affectez ensuite sa valeur de retour à l'écouteur d'événements. C'est pourquoi il ne met pas à jour ou ne fait rien après le chargement. Essaye ça:

textarea.addEventListener("keypress",textareaLengthCheck,false);

À part ça:

var length = textarea.length;

textarea est le texte réel, pas la valeur. Essayez ceci à la place:

var length = textarea.value.length;

Combiné avec la suggestion précédente, votre fonction devrait être:

function textareaLengthCheck() {
    var length = this.value.length;
    // rest of code
};
13
Niet the Dark Absol

La solution acceptée est obsolète.

Voici deux scénarios où l'événement keyup ne sera pas déclenché:

  1. L'utilisateur fait glisser le texte dans la zone de texte.
  2. L'utilisateur copie-colle du texte dans la zone de texte avec un clic droit (menu contextuel).

Utilisez plutôt l'événement HTML5 input pour une solution plus robuste:

<textarea maxlength='140'></textarea>

JavaScript ( démo ):

var textarea = document.querySelector("textarea");

textarea.addEventListener("input", function(){
    var maxlength = this.getAttribute("maxlength");
    var currentLength = this.value.length;

    if( currentLength >= maxlength ){
        console.log("You have reached the maximum number of characters.");
    }else{
        console.log(maxlength - currentLength + " chars left");
    }
});

Et si vous voulez absolument utiliser jQuery:

$('textarea').on("input", function(){
    var maxlength = $(this).attr("maxlength");
    var currentLength = $(this).val().length;

    if( currentLength >= maxlength ){
        console.log("You have reached the maximum number of characters.");
    }else{
        console.log(maxlength - currentLength + " chars left");
    }
});
13
Etienne Martin

Voici un code simple. J'espère que ça marche

$(document).ready(function() {
var text_max = 99;
$('#textarea_feedback').html(text_max + ' characters remaining');

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

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

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea" rows="8" cols="30" maxlength="99" ></textarea>
<div id="textarea_feedback"></div>

8
Shafiqul Islam

Ce code obtient la valeur maximale de l'attribut maxlength de la textarea et diminue la valeur lorsque l'utilisateur tape.

< D&EACUTE;MO >

var el_t = document.getElementById('textarea');
var length = el_t.getAttribute("maxlength");
var el_c = document.getElementById('count');
el_c.innerHTML = length;
el_t.onkeyup = function () {
  document.getElementById('count').innerHTML = (length - this.value.length);
};
<textarea id="textarea" name="text"
 maxlength="500"></textarea>
<span id="count"></span>

2
Kurenai Kunai

Pour ceux qui souhaitent une solution simple sans jQuery, voici une solution.

textarea et le conteneur de messages à mettre dans votre formulaire:

<textarea onKeyUp="count_it()" id="text" name="text"></textarea>
Length <span id="counter"></span>

JavaScript:

<script>
function count_it() {
    document.getElementById('counter').innerHTML = document.getElementById('text').value.length;
}
count_it();
</script>

Le script compte les caractères initialement, puis pour chaque frappe, puis place le nombre dans la plage du compteur.

Martin

1
Martin Joergensen

J'ai trouvé que la réponse acceptée ne fonctionnait pas exactement avec textareas pour les raisons indiquées dans Chrome compte les caractères incorrects dans textarea avec l'attribut maxlength en raison des caractères de nouvelle ligne et de retour à la ligne, ce qui est important si vous avez besoin de savoir combien d'espace aurait être pris en compte lors du stockage des informations dans une base de données. De plus, l'utilisation de keyup est dépréciée à cause du glisser-déposer et du collage de texte dans le presse-papiers, c'est pourquoi j'ai utilisé les événements input et propertychange. Ce qui suit prend en compte les caractères de nouvelle ligne et calcule avec précision la longueur de textarea.

$(function() {
  $("#myTextArea").on("input propertychange", function(event) {
    var curlen = $(this).val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length;

    $("#counter").html(curlen);
  });
});

$("#counter").text($("#myTextArea").val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="myTextArea"></textarea><br>
Size: <span id="counter" />

0
Nielsvh

var maxchar = 10;
$('#message').after('<span id="count" class="counter"></span>');
$('#count').html(maxchar+' of '+maxchar);
$('#message').attr('maxlength', maxchar);
$('#message').parent().addClass('wrap-text');
$('#message').on("keydown", function(e){
	var len =  $('#message').val().length;
	if (len >= maxchar && e.keyCode != 8)
		   e.preventDefault();
	else if(len <= maxchar && e.keyCode == 8){
		if(len <= maxchar && len != 0)
	   		$('#count').html(maxchar+' of '+(maxchar - len +1));
	   	else if(len == 0)
	   		$('#count').html(maxchar+' of '+(maxchar - len));
	}else
		 $('#count').html(maxchar+' of '+(maxchar - len-1)); 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="message" name="text"></textarea>

0
Manish Kumar Jaiswal MJ
    $(document).ready(function(){ 
    $('#characterLeft').text('140 characters left');
    $('#message').keydown(function () {
        var max = 140;
        var len = $(this).val().length;
        if (len >= max) {
            $('#characterLeft').text('You have reached the limit');
            $('#characterLeft').addClass('red');
            $('#btnSubmit').addClass('disabled');            
        } 
        else {
            var ch = max - len;
            $('#characterLeft').text(ch + ' characters left');
            $('#btnSubmit').removeClass('disabled');
            $('#characterLeft').removeClass('red');            
        }
    });    
});
0
PK-1825

Ils disent que IE a des problèmes avec l'événement input, mais à part cela, la solution est plutôt simple.

ta = document.querySelector("textarea");
count = document.querySelector("label");

ta.addEventListener("input", function (e) {
  count.innerHTML = this.value.length;
});
<textarea id="my-textarea" rows="4" cols="50" maxlength="10">
</textarea>
<label for="my-textarea"></label>

0
Ron Royston