javascript - テキストエリアの行番号の取得

Question

重複の可能性：
テキストエリア内のカーソルの「行」（行）番号を確認します

textareaHTML要素でユーザーのカーソルが置かれている行番号を調べたい。

これはjavascriptとjqueryを使用して可能ですか？

Answer 1

これはボタンクリックで機能します。テキストエリア内のカーソルの「行」（行）番号を検索から盗まれた

​function getline()
{
    var t = $("#t")[0];
    alert(t.value.substr(0, t.selectionStart).split("\n").length);
}​

HTML

​<textarea rows="6" id="t">
there is no
love in the ghetto
so come here
and get it
</textarea>
<input type="button" onclick="getline()" value="get line" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 2

次のアプローチを使用できます

1. カレットの位置（インデックス）を見つけます。
2. 位置0からインデックスまでの部分文字列を検索します
3. 手順2で取得した部分文字列の新しい行数を検索します。

// テスト

$(function() {
    $('#test').keyup(function() {
        var pos = 0;
        if (this.selectionStart) {
            pos = this.selectionStart;
        } else if (document.selection) {
            this.focus();

            var r = document.selection.createRange();
            if (r == null) {
                pos = 0;
            } else {

                var re = this.createTextRange(),
                rc = re.duplicate();
                re.moveToBookmark(r.getBookmark());
                rc.setEndPoint('EndToStart', re);

                pos = rc.text.length;
            }
        }
        $('#c').html(this.value.substr(0, pos).split("\n").length);
    });
});
​

これが実際の例です http://jsfiddle.net/S2yn3/1/

Answer 3

これは、次の3つのステップに分割できます。

• テキストエリア内のケアレットの位置（最初から文字数）
• テキストエリアの行数を取得するにはどうすればよいですか？/ JavaScript：HTMLテキストエリアに改行を追加するにはどうすればよいですか？
• カレットの前の線を取得し、それらを数えます。

ラップされたテキストやスクロールされたコンテンツを検討したくないと思います。この回答の関数を使用するとすると、次のようになります。

var el = document.getElementById("inputarea"); // or something

var pos = getCaret(el),
    before = el.value.substr(0, pos),
    lines = before.split(/\r?\n/);
return lines.length;