你如何獲得文本區域中的光標位置？

Question

我有一個 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 中抓取光標位置？
• 您是否有更好的建議來確定我是在 textarea 的第一行還是最后一行？

除非 JavaScript 如此簡單或更簡單，否則首選 jQuery 解決方案。

Answer 1

如果沒有選擇，則可以使用.selectionStart或.selectionEnd屬性（沒有選擇，它們是相等的）。

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

請注意，較舊的瀏覽器（最著名的是IE8-）不支持此功能。 在那里，您必須使用文本范圍，但這是一個完全的挫敗感。

我相信，盡管有一個庫專門用於獲取和設置輸入元素中的選擇/光標位置。 我不記得它的名字了，但是關於這個主題的文章似乎很多。

Answer 2

我已經做了很多工作，並多次在Stack Overflow上發布了一個函數來獲取插入符/選擇符在textareas中的位置。 不同於幾乎所有其他代碼都可以執行此操作，它可以與IE <9中的換行符一起正常工作。

這是一個帶有一些背景的示例問題：

是否有Internet Explorer批准的selectionStart和selectionEnd替代品？

這是我編寫的jQuery插件的鏈接，其中包括此函數和其他與選擇相關的textarea函數：

https://github.com/timdown/rangyinputs

Answer 3

這是我標准庫中的跨瀏覽器功能：

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/

Answer 4

這是獲取行號和列位置的代碼

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元素

Answer 5

getCursorPos（）函數將返回GWT中的光標位置

    TextArea content = new TextArea();
    content.getCursorPos();