Javascript 你如何获得文本区域中的光标位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7745867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you get the cursor position in a textarea?
提问by Chev
I have a textarea and I would like to know if I am on the last line in the textarea or the first line in the textarea with my cursor with JavaScript.
我有一个 textarea，我想知道我是在 textarea 的最后一行还是 textarea 的第一行，我的光标是 JavaScript。
I thought of grabbing the position of the first newline character and the last newline character and then grabbing the position of the cursor.
我想到了抓取第一个换行符和最后一个换行符的位置，然后抓取光标的位置。
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.
- Is it possible to grab the cursor position within the textarea?
- Do you have a better suggestion for finding out if I am on the first or last line of a textarea?
- 是否可以在 textarea 中抓取光标位置？
- 您是否有更好的建议来确定我是在 textarea 的第一行还是最后一行？
jQuery solutions preferred unless JavaScript is as simple or simpler.
除非 JavaScript 如此简单或更简单，否则首选 jQuery 解决方案。
回答by pimvdb
If there is no selection, you can use the properties .selectionStartor .selectionEnd(with no selection they're equal).
如果没有选择，您可以使用属性.selectionStartor .selectionEnd（没有选择它们是相等的）。
var cursorPosition = $('#myTextarea').prop("selectionStart");
Note that this is not supported in older browsers, most notably IE8-. There you'll have to work with text ranges, but it's a complete frustration.
请注意，较旧的浏览器不支持此功能，尤其是 IE8-。在那里您必须处理文本范围，但这完全令人沮丧。
I believe there is a library somewhere which is dedicated to getting and setting selections/cursor positions in input elements, though. I can't recall its name, but there seem to be dozens on articles about this subject.
不过，我相信某处有一个库专门用于获取和设置输入元素中的选择/光标位置。我不记得它的名字，但似乎有几十篇关于这个主题的文章。
回答by gilly3
Here's a cross browser function I have in my standard library:
这是我的标准库中的跨浏览器功能：
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;
}
Use it in your code like this:
在您的代码中使用它，如下所示：
var cursorPosition = getCursorPos($('#myTextarea')[0])
Here's its complementary function:
这是它的补充功能：
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();
}
}
回答by Clay Smith
Here is code to get line number and column position
这是获取行号和列位置的代码
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 is the text area DOM element
tArea 是文本区域 DOM 元素
回答by Mohammed Rizwan
getCursorPos() function will return the cursor position in GWT
getCursorPos() 函数将返回 GWT 中的光标位置
TextArea content = new TextArea();
content.getCursorPos();
