Comment vérifier la longueur d'une chaîne avec JavaScript
Je souhaite obtenir la longueur de la chaîne lorsqu'une touche est enfoncée, comme le fait StackOverflow.
J'ai essayé de faire cela avec onblur, mais cela ne fonctionne pas. Comment puis-je faire cela?
En ce qui concerne la question de l’événement à utiliser pour cela: utilise l’événement input et retourne à keyupkeydown dans les navigateurs plus anciens.
Voici un exemple de style DOM0:
someElement.oninput = function() {
this.onkeydown = null;
// Your code goes here
};
someElement.onkeydown = function() {
// Your code goes here
};
L'autre question est de savoir comment compter le nombre de caractères dans la chaîne. Selon votre définition de «personnage», toutes les réponses postées jusqu'à présent sont incorrectes. La réponse string.length est uniquement fiable lorsque vous êtes certain que seuls les symboles BMP Unicode seront entrés. Par exemple, 'a'.length == 1, comme vous l’attendiez.
Cependant, pour les symboles supplémentaires (non BMP), les choses sont un peu différentes. Par exemple, '????'.length == 2, même s’il n’y a qu’un seul symbole Unicode. En effet, _/JavaScript expose les unités de code UCS-2 sous la forme de «caractères» .
Heureusement, il est toujours possible de compter le nombre de symboles Unicode dans une chaîne JavaScript via un hackery. Vous pouvez utiliser Punycode.js les fonctions de l’utilitaire/pour convertir les chaînes UCS-2 en points de code Unicode à cet effet:
// `String.length` replacement that only counts full Unicode characters
punycode.ucs2.decode('a').length; // 1
punycode.ucs2.decode('????').length; // 1 (note that `'????'.length == 2`!)
P.S. Je viens de remarquer que le script de compteur utilisé par Stack Overflow se trompe. Essayez d'entrer ???? et vous verrez qu'il compte (à tort) comme deux caractères.
UPDATE: Depuis que j'ai écrit ceci, l'événement d'entrée a reçu un niveau de support décent. Ce n'est toujours pas à 100% dans IE9, vous devrez donc attendre un peu jusqu'à ce que IE9 soit complètement supprimé. À la lumière de ma réponse à cette question, cependant, l'entrée est plus qu'un remplacement décent de la méthode que j'ai présentée, donc je recommande de changer.
Utiliser l'événement keyup
var inp = document.getElementById('myinput');
var chars = document.getElementById('chars');
inp.onkeyup = function() {
chars.innerHTML = inp.value.length;
}<input id="myinput"><span id="chars">0</span>MODIFIER:
Juste une note pour ceux qui suggèrent keydown. Ça ne marchera pas. Le raccourci clavier déclenche le caractère avant ajouté à la zone de saisie ou à la zone de texte, de sorte que la longueur de la valeur serait incorrecte (un pas en arrière). Par conséquent, la seule solution qui fonctionne est keyup, qui déclenche après le caractère est ajouté.
Vous devez lier une fonction à l'événement keyup
textarea.keyup = function(){
textarea.value.length....
}
avec jquery
$('textarea').keyup(function(){
var length = $(this).val().length;
});
La manière rapide et sale serait de se lier simplement à l'événement keyup.
$('#mytxt').keyup(function(){
$('#divlen').text('you typed ' + this.value.length + ' characters');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=text id=mytxt >
<div id=divlen></div>Mais il serait préférable de lier une fonction réutilisable à plusieurs événements. Par exemple également à la méthode change (), vous pouvez ainsi anticiper les modifications de texte telles que les pâtes (avec le menu contextuel, les raccourcis seraient également interceptés par la variable keyup)
var myString = 'sample String'; var length = myString.length ;
vous devez d’abord définir un gestionnaire de frappe ou une sorte de déclencheur d’événement à écouter,
Fondamentalement: attribuez un gestionnaire keyup à l'élément <textarea>, dans lequel il compte la longueur du <textarea> et écrivez le compte dans un <div> séparé si sa longueur est inférieure à une valeur minimale.
Voici un exemple
var min = 15;
document.querySelector('#tst').onkeyup = function(e){
document.querySelector('#counter').innerHTML =
this.value.length < min
? (min - this.value.length)+' to go...'
: '';
}
body {font: normal 0.8em verdana, arial;}
#counter {color: grey}<textarea id="tst" cols="60" rows="10"></textarea>
<div id="counter"></div>Je ne sais pas ce que vous entendez par avoir essayé onblur, mais pour obtenir la longueur d'une chaîne, utilisez sa propriété .length, donc dans le cas d'une zone de texte ou d'une zone de texte:
document.getElementById("textarea").value.length
Changer cet identifiant, bien sûr, quel que soit l'identifiant réel.
Laissant une réponse (et une answer au titre de la question), pour les futurs googlers ...
Vous pouvez utiliser .length pour obtenir la longueur d’une chaîne.
var x = 'Mozilla'; var empty = '';
console.log ('Mozilla est' + x.length + 'unités de code longues');
/ * "Mozilla a une longueur de 7 unités de code" * /
console.log ('La chaîne vide a une longueur de' + empty.length);
/ * "La chaîne vide a une longueur de 0" * /
Si vous souhaitez obtenir la longueur d'une textareapar exempleid="txtarea", vous pouvez utiliser le code suivant.
txtarea = document.getElementById('txtarea');
console.log(txtarea.value.length);
Vous devriez pouvoir vous en passer avec les symboles Unicode BMP. Si vous souhaitez prendre en charge des "symboles non BMP" tels que (????), il s'agit d'un cas Edge et vous devez trouver un moyen de contourner le problème.
????
<html>
<head></head>
<title></title>
<script src="/js/jquery-3.2.1.min.js" type="text/javascript"></script>
<body>
Type here:<input type="text" id="inputbox" value="type here"/>
<br>
Length:<input type="text" id="length"/>
<script type='text/javascript'>
$(window).keydown(function (e) {
//use e.which
var length = 0;
if($('#inputbox').val().toString().trim().length > 0)
{
length = $('#inputbox').val().toString().trim().length;
}
$('#length').val(length.toString());
})
</script>
</body>
</html>