Javascript 如何获取文本区域中的光标位置？

我有一个textarea，我想知道我是在textarea的最后一行，还是在textarea的第一行，我的光标使用JavaScript

我想抓取第一个换行符和最后一个换行符的位置，然后抓取光标的位置

var firstNewline = $('#myTextarea').val().indexOf('\n');
var lastNewline = $('#myTextarea').val().lastIndexOf('\n');

var cursorPosition = ?????;

if (cursorPosition < firstNewline)
    // I am on first line.
else if (cursorPosition > lastNewline)
    // I am on last line.

var firstNewline=$（'#myTextarea'）.val（）.indexOf（'\n'）；
var lastNewline=$（'#myTextarea'）.val（）.lastIndexOf（'\n'）；
var cursorPosition=？？？？？；
if（光标位置<第一个换行符）
//我在第一线。
else if（光标位置>最后换行）
//我在最后一行。

• 是否可以在文本区域内获取光标位置
• 你有更好的建议来确定我是在文本区的第一行还是最后一行吗

---

首选jQuery解决方案，除非JavaScript如此简单。

如果没有选择，可以使用属性

.selectionStart

或

.selectionEnd

（没有选择，它们是相等的）

请注意，这在较旧的浏览器中不受支持，尤其是IE8-。在那里，你将不得不处理文本范围，但这是一个完全的挫折

---

我相信有一个库专门用于获取和设置输入元素中的选择/光标位置。我记不起它的名字了，但似乎有几十篇关于这个主题的文章。

我的标准库中有一个跨浏览器功能：

function getCursorPos(input) {
    if ("selectionStart" in input && document.activeElement == input) {
        return {
            start: input.selectionStart,
            end: input.selectionEnd
        };
    }
    else if (input.createTextRange) {
        var sel = document.selection.createRange();
        if (sel.parentElement() === input) {
            var rng = input.createTextRange();
            rng.moveToBookmark(sel.getBookmark());
            for (var len = 0;
                     rng.compareEndPoints("EndToStart", rng) > 0;
                     rng.moveEnd("character", -1)) {
                len++;
            }
            rng.setEndPoint("StartToStart", input.createTextRange());
            for (var pos = { start: 0, end: len };
                     rng.compareEndPoints("EndToStart", rng) > 0;
                     rng.moveEnd("character", -1)) {
                pos.start++;
                pos.end++;
            }
            return pos;
        }
    }
    return -1;
}

在代码中使用它，如下所示：

var cursorPosition = getCursorPos($('#myTextarea')[0])

这是它的补充功能：

function setCursorPos(input, start, end) {
    if (arguments.length < 3) end = start;
    if ("selectionStart" in input) {
        setTimeout(function() {
            input.selectionStart = start;
            input.selectionEnd = end;
        }, 1);
    }
    else if (input.createTextRange) {
        var rng = input.createTextRange();
        rng.moveStart("character", start);
        rng.collapse();
        rng.moveEnd("character", end - start);
        rng.select();
    }
}

函数setCursorPos（输入、开始、结束）{
如果（arguments.length<3）end=start；
如果（输入中的“selectionStart”）{
setTimeout（函数（）{
input.selectionStart=开始；
input.selectionEnd=结束；
}, 1);
}
else if（input.createTextRange）{
var rng=input.createTextRange（）；
rng.moveStart（“字符”，开始）；
rng.collapse（）；
rng.moveEnd（“字符”，结束-开始）；
rng.select（）；
}
}

---

以下是获取行号和列位置的代码

function getLineNumber(tArea) {

    return tArea.value.substr(0, tArea.selectionStart).split("\n").length;
}

function getCursorPos() {
    var me = $("textarea[name='documenttext']")[0];
    var el = $(me).get(0);
    var pos = 0;
    if ('selectionStart' in el) {
        pos = el.selectionStart;
    } else if ('selection' in document) {
        el.focus();
        var Sel = document.selection.createRange();
        var SelLength = document.selection.createRange().text.length;
        Sel.moveStart('character', -el.value.length);
        pos = Sel.text.length - SelLength;
    }
    var ret = pos - prevLine(me);
    alert(ret);

    return ret; 
}

function prevLine(me) {
    var lineArr = me.value.substr(0, me.selectionStart).split("\n");

    var numChars = 0;

    for (var i = 0; i < lineArr.length-1; i++) {
        numChars += lineArr[i].length+1;
    }

    return numChars;
}

函数getLineNumber（tArea）{
返回tArea.value.substr（0，tArea.selectionStart）.split（“\n”）.length；
}
函数getCursorPos（）{
var me=$（“textarea[name='documenttext']）[0]；
var el=$（me）.get（0）；
var-pos=0；
如果（'selectionStart'在el中）{
pos=el.selectionStart；
}else if（文档中的“选择”）{
el.focus（）；
var Sel=document.selection.createRange（）；
var SelLength=document.selection.createRange（）.text.length；
Sel.moveStart（'字符'，-el.value.length）；
pos=Sel.text.length-SelLength；
}
var ret=位置-前置线（me）；
警报（ret）；
返回ret；
}
功能前置线（me）{
var lineArr=me.value.substr（0，me.selectionStart）.split（“\n”）；
var numChars=0；
对于（变量i=0；i

---

tArea是文本区域DOM元素

您在这里看到解决方案了吗：这将抛出一个错误，因为

indexOf

和lastIndexOf`函数不是val`函数的方法。您应该使用此代码（尽管您根本不应该使用该代码）：

var firstNewline=String（$（“#myTextarea”）.val（））.indexOf（'\n'）光标是鼠标指针，插入符号是文本控制器所在的指示器。@John感谢您的描述。更进一步，从概念上讲，插入符号表示文本中的位置，而光标表示任何内容中的位置。关于图形界面，它们有不同的用途，并且通常有不同的物理渲染。有没有办法在IE8中实现这一点？谢谢你的解决办法。@Alex Ford:我现在知道以前已经有人回答过了，事实上：。你是对的。我使用了一个回答你链接的问题的jquery插件。成功了。抱歉重复。链接的答案在IE<9的换行符中无法正常工作。看我的答案。我想你在谈论jquery插入符号library@TimDown-你说得对。我现在意识到我粘贴在这里的版本，我一直在使用
控件。我已经编辑了我的答案，以使用同样适用于
控件的版本。它需要JQuery吗？我注意到$symbolNo的bc。我曾经发布过使用jQuery获取元素引用的示例用法，但是您可以在不使用jQuery的情况下获取元素引用。
function getLineNumber(tArea) {

    return tArea.value.substr(0, tArea.selectionStart).split("\n").length;
}

function getCursorPos() {
    var me = $("textarea[name='documenttext']")[0];
    var el = $(me).get(0);
    var pos = 0;
    if ('selectionStart' in el) {
        pos = el.selectionStart;
    } else if ('selection' in document) {
        el.focus();
        var Sel = document.selection.createRange();
        var SelLength = document.selection.createRange().text.length;
        Sel.moveStart('character', -el.value.length);
        pos = Sel.text.length - SelLength;
    }
    var ret = pos - prevLine(me);
    alert(ret);

    return ret; 
}

function prevLine(me) {
    var lineArr = me.value.substr(0, me.selectionStart).split("\n");

    var numChars = 0;

    for (var i = 0; i < lineArr.length-1; i++) {
        numChars += lineArr[i].length+1;
    }

    return numChars;
}