获取文本区域中的行号

时间:2012-09-23 14:10:09

标签: javascript jquery html textarea

  

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

我想在HTML textarea元素中找出用户光标所在的行号。

这可以使用javascript和jquery吗?

3 个答案:

答案 0 :(得分:20)

这适用于按钮单击。从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" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

答案 1 :(得分:1)

您可以使用以下方法

  1. Find the caret positio n(索引)。
  2. 从位置0到索引
  3. 查找子字符串
  4. 搜索步骤2中获取的子字符串中的新行数。
  5. //测试

    $(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/

答案 2 :(得分:1)

这可以分为三个步骤:

我想你不想考虑包装文字和滚动内容。假设你使用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;