Подтвердить что ты не робот

Как проверить длину строки с помощью JavaScript

Я хочу получить длину строки при нажатии клавиши, как это делает StackOverflow.

Example of StackOverflow showing length

Я попытался сделать это с помощью onblur, но он не работает. Как это сделать?

4b9b3361

Ответ 1

Что касается вопроса о том, какое событие вы должны использовать для этого: использовать событие input и вернуться к keyup/keydown старше браузеры.

Вот пример, DOM0-стиль:

someElement.oninput = function() {
  this.onkeydown = null;
  // Your code goes here
};
someElement.onkeydown = function() {
  // Your code goes here
};

Другой вопрос - как подсчитать количество символов в строке. В зависимости от вашего определения "character" все ответы, опубликованные до сих пор, неверны. Ответ string.length является надежным только тогда, когда вы убедитесь, что будут введены только символы BMP Unicode. Например, 'a'.length == 1, как ожидалось youd.

Однако для дополнительных (не BMP) символов все немного отличается. Например, '𝌆'.length == 2, хотя есть только один символ Unicode. Это связано с тем, что JavaScript предоставляет коды кода UCS-2 как "символы" .

К счастью, его все еще можно подсчитать количество символов Unicode в строке JavaScript через хакерство. Вы можете использовать функции утилиты Punycode.js для преобразования между строками UCS-2 и кодами Unicode для этого:

// `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. Я просто заметил счетчик script, который использует Stack Overflow, делает это неправильно. Попробуйте ввести 𝌆, и вы увидите, что он (неправильно) считается как два символа.

Ответ 2

ОБНОВЛЕНИЕ:. Поскольку я написал это, входное событие получило достойный уровень поддержки. Это все еще не 100% в IE9, поэтому вам придется немного подождать, пока IE9 не будет полностью отключен. Однако в свете моего ответа на этот вопрос ввод является более чем достойной заменой для метода, который я представил, поэтому я рекомендую переключиться.

Использовать событие 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>

Ответ 3

Вы должны привязать функцию к событию keyup

textarea.keyup = function(){
   textarea.value.length....
} 

с jquery

$('textarea').keyup(function(){
   var length = $(this).val().length;
});

Ответ 4

Быстрый и грязный способ заключается в простом привязке к событию 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>

Ответ 5

function cool(d)
{
    alert(d.value.length);
}
<input type="text" value="" onblur="cool(this)">

Ответ 6

 var myString = 'sample String';   var length = myString.length ;

сначала вам нужно определить обработчик нажатой клавиши или какой-то триггер события, чтобы прослушать, Кстати, получение длины действительно просто, как указано выше

Ответ 7

Я не уверен, что вы имеете ввиду, попробовав его onblur, но чтобы получить длину любой строки, используйте ее свойство .length, поэтому в случае текстового поля или текстового поля:

document.getElementById("textarea").value.length

Изменение этого идентификатора, конечно, независимо от фактического идентификатора.

Ответ 8

В основном: назначьте обработчик keyup элементу <textarea>, в нем подсчитайте длину <textarea> и запишите счетчик в отдельный <div>, если его длина короче минимального значения.

Вот пример -

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>

Ответ 9

Оставив ответ (и ответ на заголовок вопроса), для будущих гуглеров...

Вы можете использовать .length, чтобы получить длину строки.

var x = 'Mozilla'; var empty = '';

console.log('Mozilla is' + x.length + 'единицы кода long');

/* "Mozilla имеет 7 кодовых единиц длиной" */

console.log('Пустая строка имеет длину' + empty.length);

/* "Пустая строка имеет длину 0" */

Если вы намереваетесь получить длину textarea say id="txtarea", то вы можете использовать следующий код.

txtarea = document.getElementById('txtarea');
console.log(txtarea.value.length);

Вы должны уйти от использования этого символа с символами Unicode BMP. Если вы хотите поддерживать "символы без BMP", например (😂), то это край, и вам нужно найти некоторую работу.

😂