Получить позицию каретки в textarea (IE)

Question

Я хочу получить позицию каретки внутри текстовой области (только для Internet Explorer). у меня есть это:

document.activeElement.focus();    
var sel2 = document.selection.createRange(); 
sel2.moveStart('character', -document.activeElement.value.length); 
var caretPos = sel2.text.length; 
alert(caretPos); 

Если текстовое поле одна строка только я получаю правильный результат, но если есть много строк результат является неправильным, поскольку новая линия имеет дополнительный символ, который не виден ...

Как я могу получить правильное значение позиции (без удаления \ r \ n и аналогичной грязной работы)?

Answer 1

Я бы сказал, что линия подсчета прерывается как два символа при расчете границ выбора/позиции курсора - правильный подход. По сути, эти два символа \r\n есть в тексте. Они присутствуют в свойстве textarea value, и они находятся в значении, которое отправляется на сервер.

Единственные аргументы я могу увидеть для подсчета разрывов строк, как один символ являются:

1. Согласованность с другими браузерами TextRange методы
2. в IE рассмотреть разрывы строк как один символ

Я думаю, ни то, ни другое. Во-первых, IE уже не совместим с другими браузерами при подсчете разрывов строк как двух символов, а не одного. Во-вторых, IE's TextRange основанные на символах методы в любом случае немного сумасшедшие, вызывая проблемы везде, где они используются.

Я думаю, что имеет смысл рассматривать позицию выбора/каретки как позицию относительно фактического текста в текстовом поле. Это позволяет легко манипулировать текстом.

Вот две основные функции. Первая из них - единственная функция получения позиции в области textarea/caret, которую я видел, которая работает правильно со всеми разрывами строк. Вы можете найти это здесь: How to get the start and end points of selection in text area?. Во-вторых, здесь комплементарной setSelection функция:

function offsetToRangeCharacterMove(el, offset) { 
    return offset - (el.value.slice(0, offset).split("\r\n").length - 1); 
} 

function setSelection(el, startOffset, endOffset) { 
    var range = el.createTextRange(); 
    var startCharMove = offsetToRangeCharacterMove(el, startOffset); 
    range.collapse(true); 
    if (startOffset == endOffset) { 
     range.move("character", startCharMove); 
    } else { 
     range.moveEnd("character", offsetToRangeCharacterMove(el, endOffset)); 
     range.moveStart("character", startCharMove); 
    } 
    range.select(); 
}