StackOverflowのようにキーが押されたときの文字列の長さを取得したい。
でこれを実行しようとしましたがonblur
、機能していません。どうすればよいですか?
StackOverflowのようにキーが押されたときの文字列の長さを取得したい。
でこれを実行しようとしましたがonblur
、機能していません。どうすればよいですか?
更新:私がこれを書いたので、入力イベントはまともなレベルのサポートを得ています。IE9ではまだ100%ではないため、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>
キーダウンを提案する人のためのメモ。それはうまくいきません。キーダウンは、文字が入力ボックスまたはテキストエリアに追加される前に起動するため、値の長さが間違っています(1ステップ遅れます)。したがって、機能する唯一の解決策は、キャラクターが追加された後に起動するキーアップです。
関数をキーアップイベントにバインドする必要があります
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>
ただし、再利用可能な関数をいくつかのイベントにバインドすることをお勧めします。たとえば、change()に対しても、貼り付けなどのテキストの変更を予測することもできます(コンテキストメニューを使用すると、ショートカットもkeyup
)によってキャッチされます。
function cool(d)
{
alert(d.value.length);
}
<input type="text" value="" onblur="cool(this)">
文字列の長さを返します
イベントをblur
使用する代わりに。keydown
var myString = 'sample String'; var length = myString.length ;
まず、キーを押したハンドラーまたはある種のイベントトリガーを定義してリッスンする必要があります。ところで、長さの取得は上記のように非常に簡単です。
onblurを試したことの意味はわかりませんが、文字列の長さを取得するには、その.lengthプロパティを使用します。したがって、テキストボックスまたはテキストエリアの場合は次のようになります。
document.getElementById("textarea").value.length
もちろん、そのIDを実際のIDに変更します。
基本的に:要素に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>
<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>
返信(および質問のタイトルへの回答)を残して、将来のグーグルのために...
.length
文字列の長さを取得するために使用できます。
var x ='Mozilla'; var empty ='';
console.log('Mozillaは'+ x.length +'コード単位の長さ');
/*「Mozillaの長さは7コード単位です」*/
console.log('空の文字列の長さは'+ empty.length);
/*"空の文字列の長さは0"*/
textarea
発言 の長さを取得する場合id="txtarea"
は、次のコードを使用できます。
txtarea = document.getElementById('txtarea');
console.log(txtarea.value.length);
これをBMPUnicode記号で使用することで回避できるはずです。()のような「非BMPシンボル」をサポートしたい場合は、そのエッジケースであり、いくつかの回避策を見つける必要があります。
これは、Unicode文字の文字列を取得するために作成した関数です。
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;
}