Я хочу получить длину строки при нажатии клавиши, как это делает StackOverflow.
Я попытался сделать это с помощью onblur
, но он не работает. Как это сделать?
Я хочу получить длину строки при нажатии клавиши, как это делает StackOverflow.
Я попытался сделать это с помощью onblur
, но он не работает. Как это сделать?
Что касается вопроса о том, какое событие вы должны использовать для этого: использовать событие 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, делает это неправильно. Попробуйте ввести 𝌆
, и вы увидите, что он (неправильно) считается как два символа.
ОБНОВЛЕНИЕ:. Поскольку я написал это, входное событие получило достойный уровень поддержки. Это все еще не 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>
Вы должны привязать функцию к событию keyup
textarea.keyup = function(){
textarea.value.length....
}
с jquery
$('textarea').keyup(function(){
var length = $(this).val().length;
});
Быстрый и грязный способ заключается в простом привязке к событию 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>
function cool(d)
{
alert(d.value.length);
}
<input type="text" value="" onblur="cool(this)">
var myString = 'sample String'; var length = myString.length ;
сначала вам нужно определить обработчик нажатой клавиши или какой-то триггер события, чтобы прослушать, Кстати, получение длины действительно просто, как указано выше
Я не уверен, что вы имеете ввиду, попробовав его onblur, но чтобы получить длину любой строки, используйте ее свойство .length, поэтому в случае текстового поля или текстового поля:
document.getElementById("textarea").value.length
Изменение этого идентификатора, конечно, независимо от фактического идентификатора.
В основном: назначьте обработчик 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>
Оставив ответ (и ответ на заголовок вопроса), для будущих гуглеров...
Вы можете использовать .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", например (😂), то это край, и вам нужно найти некоторую работу.