你如何获得文本区域中的光标位置？答案

【问题标题】：How do you get the cursor position in a textarea?你如何获得文本区域中的光标位置？
【发布时间】：2011-12-06 10:45:30
【问题描述】：

我有一个 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.

是否可以在文本区域内抓取光标位置？
您有更好的建议来确定我是在 textarea 的第一行还是最后一行？

首选 jQuery 解决方案，除非 JavaScript 一样简单或更简单。

【问题讨论】：

你看到这里的解决方案了吗：blog.vishalon.net/index.php/…
这将引发错误，因为 indexOf 和 lastIndexOf` 函数不是 val` 函数的方法。你应该使用这个（尽管你根本不应该使用那个代码）：var firstNewline = String($("#myTextarea").val()).indexOf('\n');
cursor 是鼠标指针，caret 是文本控制器所在的指示器。
@John 感谢您的描述。更进一步，从概念上讲，插入符号表示文本中的位置，而光标表示任何内容中的位置。关于图形界面，它们具有不同的用途，并且通常具有不同的物理渲染。

标签： javascript jquery html input textarea

【解决方案1】：

如果没有选择，您可以使用属性.selectionStart 或.selectionEnd（没有选择它们是相等的）。

var cursorPosition = $('#myTextarea').prop("selectionStart");

请注意，旧浏览器不支持此功能，尤其是 IE8-。在那里您将不得不使用文本范围，但这完全是一种挫败感。

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

【讨论】：

当。有没有办法让它在 IE8 中工作？感谢您的解决方案。
@Alex Ford：我现在看到它实际上已经得到了回答：stackoverflow.com/questions/2897155/…。
你是对的。我使用了一位回答者针对您链接的问题给出的 jquery 插件。做到了。抱歉重复了。
链接的答案在 IE
我想你在谈论 jquery caret library

【解决方案2】：

这是我的标准库中的跨浏览器功能：

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();
    }
}

http://jsfiddle.net/gilly3/6SUN8/

【讨论】：

@TimDown - 你是对的。我现在意识到我在这里粘贴的版本，我一直使用 <input> 专门控制。我已经编辑了我的答案以使用同样适用于 <textarea> 控件的版本。
是否需要 JQuery？我注意到 $ 符号的 bc
没有。我确实发布了使用 jQuery 获取元素引用的示例用法，但是您可以在没有 jQuery 的情况下获取元素引用。

【解决方案3】：

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

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;
}

tArea 是文本区域 DOM 元素

【讨论】：