43

StackOverflowのようにキーが押されたときの文字列の長さを取得したい。

長さを示すStackOverflowの例

でこれを実行しようとしましたがonblur、機能していません。どうすればよいですか?

4

11 に答える 11

46
于 2012-06-15T08:05:48.530 に答える
15

更新:私がこれを書いたので、入力イベントはまともなレベルのサポートを得ています。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ステップ遅れます)。したがって、機能する唯一の解決策は、キャラクターが追加された後に起動するキーアップです。

于 2012-06-15T08:07:00.637 に答える
6

関数をキーアップイベントにバインドする必要があります

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

jqueryで

$('textarea').keyup(function(){
   var length = $(this).val().length;
});
于 2012-06-15T08:04:57.687 に答える
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>

ただし、再利用可能な関数をいくつかのイベントにバインドすることをお勧めします。たとえば、change()に対しても、貼り付けなどのテキストの変更を予測することもできます(コンテキストメニューを使用すると、ショートカットもkeyup)によってキャッチされます。

于 2012-06-15T08:10:32.627 に答える
3

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

文字列の長さを返します

イベントをblur使用する代わりに。keydown

于 2012-06-15T08:02:32.353 に答える
3
 var myString = 'sample String';   var length = myString.length ;

まず、キーを押したハンドラーまたはある種のイベントトリガーを定義してリッスンする必要があります。ところで、長さの取得は上記のように非常に簡単です。

于 2012-06-15T08:07:15.417 に答える
2

onblurを試したことの意味はわかりませんが、文字列の長さを取得するには、その.lengthプロパティを使用します。したがって、テキストボックスまたはテキストエリアの場合は次のようになります。

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

もちろん、そのIDを実際のIDに変更します。

于 2012-06-15T08:03:17.633 に答える
2

基本的に:要素に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>

于 2012-06-15T08:16:33.867 に答える
2
<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>
于 2018-09-04T18:03:40.980 に答える
1

返信(および質問のタイトルへの回答)を残して、将来のグーグルのために...

.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シンボル」をサポートしたい場合は、そのエッジケースであり、いくつかの回避策を見つける必要があります。

于 2016-07-01T17:31:27.750 に答える
0

これは、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;
}
于 2020-12-22T10:40:14.607 に答える