如何获取文本区域中的光标位置？
如何获取文本区域中的光标位置？
提问于 2011-10-13 04:04:44
我有一个文本区，我想知道我的光标是在文本区的最后一行，还是在文本区的第一行，使用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解决方案。
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-10-13 04:11:19
如果没有选择，您可以使用属性.selectionStart或.selectionEnd (没有选择时，它们是相等的)。
var cursorPosition = $('#myTextarea').prop("selectionStart");请注意，这在较旧的浏览器中不受支持，最明显的是IE8-。在那里，你将不得不处理文本范围，但这是一个完全令人沮丧的问题。
不过，我相信有一个库专门用于获取和设置输入元素中的选择/光标位置。我记不起它的名字了，但关于这个主题的文章似乎有几十篇。
Stack Overflow用户
发布于 2011-10-13 04:13:44
下面是我的标准库中的一个跨浏览器函数：
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();
}
}Stack Overflow用户
发布于 2015-08-05 03:25:57
下面是获取行号和列位置的代码
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元素
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7745867
复制相关文章
相似问题