web-dev-qa-db-ja.com

テキストエリアでカーソル位置を取得するにはどうすればよいですか？

テキストエリアがあり、テキストエリアの最後の行にいるのか、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.
  • テキストエリア内のカーソル位置を取得することは可能ですか？
  • テキストエリアの最初の行にいるのか、最後の行にいるのかを見つけるためのより良い提案がありますか？

javaScriptが単純または単純でない限り、jQueryソリューションが優先されます。

javascriptjqueryhtmlinputtextarea
60
Chev

選択がない場合は、プロパティ.selectionStartまたは.selectionEndを使用できます（選択されていない場合）。

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

これは古いブラウザー、特にIE8-ではサポートされていないことに注意してください。そこではテキスト範囲を操作する必要がありますが、それは完全なフラストレーションです。

ただし、入力要素の選択/カーソル位置の取得と設定専用のライブラリがどこかにあると思います。私はその名前を思い出せませんが、この主題に関する記事には何十ものものがあるようです。

73
pimvdb

私はこれについてかなりの作業を行い、Stack Overflowのテキストエリアでキャレット/選択位置を取得する関数を数回投稿しました。これを行う他のほとんどすべてのコードとは異なり、IE <9の改行で適切に動作します。

いくつかの背景を持つ質問の例を次に示します。

selectionStartおよびselectionEndの代わりにInternet Explorerが承認したものはありますか？

そして、この関数と他の選択関連のテキストエリア関数を含む、私が書いたjQueryプラグインへのリンクを次に示します。

https://github.com/timdown/rangyinputs

19
Tim Down

標準ライブラリにあるクロスブラウザ関数は次のとおりです。

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/

17
gilly3

行番号と列位置を取得するコードは次のとおりです

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要素です

0
Clay Smith