Например курсор установлен в позицию 87 textarea. А как получить позицию не от начала textarea , а от начала строки в которой он установлен ?
2 ответа
Вот мой вариант:
function getCaret(el) {
if (el.selectionStart) {
return el.selectionStart;
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
}
function getPosInRow(el) {
var caret = getCaret(el);
var text = el.value.substr(0, caret).replace(/^(.*[\n\r])*([^\n\r]*)$/, '$2');
console.log(text);
return text.length;
}
document.getElementById('thetext').onkeyup = function(e) {
document.getElementById('result').value = getPosInRow(document.getElementById('thetext'));
return true;
};
#thetext {
width: 100%;
}
<div class="example-text">
<textarea id="thetext">Это текст, позицию которого можно получить.</textarea><br>
<div>Позиция в строке: <input id="result" size="4"></div>
</div>
Функция getCaret() взята на просторах интернета и вычисляет положение каретки в textarea
.
Функция getPosInRow() вычисляет позицию каретки в строке на основании функции getCaret()
таким образом: текст из textarea
обрезается после каретки, затем с помощью регулярки в нем оставляется последняя строка и потом вычисляется длина этой строки.
P.S.
Пример на чистом js, можете сами его в jquery доработать.
-
Попробуйте поперемещать курсор по тексту. Позиция в строке остаётся неизменной :( Вы вычисляете позицию каретки, а курсор и каретка это не одно и то же.– TaypfoonCommented 5 нояб. 2015 в 20:07
-
@Taypfoon, что в вашем понимании есть курсор? Курсор мыши? Откуда вы получили число 87 для курсора?– VismanCommented 6 нояб. 2015 в 3:06
-
Курсор - указатель позиции мыши на экране. В textarea каретку можно перемещать по тексту кликом левой кнопкой мыши. Хочется получить позицию курсора ( перемещённой каретки ) по клику. Позицию 87 я получил функцией getCaret().– TaypfoonCommented 6 нояб. 2015 в 6:55
-
@Taypfoon, так после клика по
textarea
вызовите неgetCaret()
, аgetPosInRow()
, которую я вам в ответе дал. В чем проблема?– VismanCommented 6 нояб. 2015 в 7:30 -
Фокус элемента может создать сайд эффект в библиотеке, управляющей состоянием формы, поэтому, предлагаю следующую функцию подобную чистой
const getCaretPos = (element: HTMLInputElement | HTMLTextAreaElement) => {
return element.selectionStart || element.value.length;
};
Чтобы получить актуальное состояние, подпишитесь на событие click
у input
или textarea
, вызывайте функция мануально в коллбеке onChange