I want to get the string length when a key is pressed like StackOverflow does.
I have tried to do this with onblur, but it's not working. How do I do this?
This question is related to
javascript
forms
The answer is
UPDATE: Since I wrote this, the input event has gotten a decent level of support. It is still not 100% in IE9, so you will have to wait a bit until IE9 is fully phased out. In light of my answer to this question, however, input is more than a decent replacement for the method I've presented, so I recommend switching.
Use keyup event
var inp = document.getElementById('myinput');_x000D_
var chars = document.getElementById('chars');_x000D_
inp.onkeyup = function() {_x000D_
chars.innerHTML = inp.value.length;_x000D_
}<input id="myinput"><span id="chars">0</span>EDIT:
Just a note for those that suggest keydown. That won't work. The keydown fires before character is added to the input box or textarea, so the length of the value would be wrong (one step behind). Therefore, the only solution that works is keyup, which fires after the character is added.
var myString = 'sample String'; var length = myString.length ;
first you need to defined a keypressed handler or some kind of a event trigger to listen , btw , getting the length is really simple like mentioned above
Leaving a reply (and an answer to the question title), For the future googlers...
You can use .length to get the length of a string.
var x = 'Mozilla'; var empty = '';
console.log('Mozilla is ' + x.length + ' code units long');
/*"Mozilla is 7 code units long" */
console.log('The empty string has a length of ' + empty.length);
/*"The empty string has a length of 0" */
If you intend to get the length of a textarea say id="txtarea" then you can use the following code.
txtarea = document.getElementById('txtarea');
console.log(txtarea.value.length);
You should be able to get away with using this with BMP Unicode symbols. If you want to support "non BMP Symbols" like (), then its an edge case, and you need to find some work around.
That's the function I wrote to get string in Unicode characters:
function nbUnicodeLength(string){
var stringIndex = 0;
var unicodeIndex = 0;
var length = string.length;
var second;
var first;
while (stringIndex < length) {
first = string.charCodeAt(stringIndex); // returns an integer between 0 and 65535 representing the UTF-16 code unit at the given index.
if (first >= 0xD800 && first <= 0xDBFF && string.length > stringIndex + 1) {
second = string.charCodeAt(stringIndex + 1);
if (second >= 0xDC00 && second <= 0xDFFF) {
stringIndex += 2;
} else {
stringIndex += 1;
}
} else {
stringIndex += 1;
}
unicodeIndex += 1;
}
return unicodeIndex;
}
I'm not sure what you mean by having tried it onblur, but to get the length of any string, use its .length property, so in the case of a textbox or textarea:
document.getElementById("textarea").value.length
Changing that ID, of course, to whatever the actual ID is.
<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>
function cool(d)_x000D_
{_x000D_
alert(d.value.length);_x000D_
}<input type="text" value="" onblur="cool(this)">It will return the length of string
Instead of blur use keydown event.
Basically: assign a keyup handler to the <textarea> element, in it count the length of the <textarea> and write the count to a separate <div> if its length is shorter than a minimum value.
Here's is an example-
var min = 15;_x000D_
document.querySelector('#tst').onkeyup = function(e){_x000D_
document.querySelector('#counter').innerHTML = _x000D_
this.value.length < min _x000D_
? (min - this.value.length)+' to go...'_x000D_
: '';_x000D_
}_x000D_
body {font: normal 0.8em verdana, arial;}_x000D_
#counter {color: grey}<textarea id="tst" cols="60" rows="10"></textarea>_x000D_
<div id="counter"></div>You should bind a function to keyup event
textarea.keyup = function(){
textarea.value.length....
}
with jquery
$('textarea').keyup(function(){
var length = $(this).val().length;
});
The quick and dirty way would be to simple bind to the keyup event.
$('#mytxt').keyup(function(){_x000D_
$('#divlen').text('you typed ' + this.value.length + ' characters');_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<input type=text id=mytxt >_x000D_
<div id=divlen></div>But better would be to bind a reusable function to several events. For example also to the change(), so you can also anticipate text changes such as pastes (with the context menu, shortcuts would also be caught by the keyup )
Source: Stackoverflow.com