获取行号在文本区域

Question

可能重复：
Find out the 'line' (row) number of the cursor in a textarea

我想找出的行号，一个用户的光标在一个HTML元素textarea。

这是可能使用JavaScript和jQuery？

Answer 1

这适用于按钮单击。从Find out the 'line' (row) number of the cursor in a textarea

​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. Find the caret positio N（指数）。
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

这可以分为三个步骤：

• Caret position in textarea, in characters from the start
• How to get the number of lines in a textarea?/JavaScript: How to add line breaks to an HTML textarea?
• 获取插入符前行，并计数。

我想你不想考虑包装文本和滚动的内容。假设您使用的功能从this answer，它会是这样的：

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;