4

Например курсор установлен в позицию 87 textarea. А как получить позицию не от начала textarea , а от начала строки в которой он установлен ?

2 ответа 2

4

Вот мой вариант:

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 доработать.

5
  • Попробуйте поперемещать курсор по тексту. Позиция в строке остаётся неизменной :( Вы вычисляете позицию каретки, а курсор и каретка это не одно и то же.
    – Taypfoon
    Commented 5 нояб. 2015 в 20:07
  • @Taypfoon, что в вашем понимании есть курсор? Курсор мыши? Откуда вы получили число 87 для курсора?
    – Visman
    Commented 6 нояб. 2015 в 3:06
  • Курсор - указатель позиции мыши на экране. В textarea каретку можно перемещать по тексту кликом левой кнопкой мыши. Хочется получить позицию курсора ( перемещённой каретки ) по клику. Позицию 87 я получил функцией getCaret().
    – Taypfoon
    Commented 6 нояб. 2015 в 6:55
  • @Taypfoon, так после клика по textarea вызовите не getCaret(), а getPosInRow(), которую я вам в ответе дал. В чем проблема?
    – Visman
    Commented 6 нояб. 2015 в 7:30
  • Да, простите, я тормознул. Благодарю за помощь.
    – Taypfoon
    Commented 6 нояб. 2015 в 16:37
0

Фокус элемента может создать сайд эффект в библиотеке, управляющей состоянием формы, поэтому, предлагаю следующую функцию подобную чистой

const getCaretPos = (element: HTMLInputElement | HTMLTextAreaElement) => {
    return element.selectionStart || element.value.length;
};

Чтобы получить актуальное состояние, подпишитесь на событие click у input или textarea, вызывайте функция мануально в коллбеке onChange

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.