Пользовательский движок текстового редактора в javascript

Question

Я строю настраиваемое поле ввода в JavaScript. (т.е. без использования редактируемого контента, ввода, текстовой области или фреймов).

Мне нужно это для поддержки основных опций в поле textarea, например:

• Щелчок мыши для положения курсора
• выбор
• Копировать вставить
  ...

На данный момент я слушаю нажатия клавиш на поле ввода. Когда клавиша нажата:
1. значение ключа String.fromCharCode(event.keyCode) передается в TMP Span.
2. Ширина промежутка измеряется и сохраняется в массиве.
3. позиция каретки рассчитывается с использованием массива размеров

Это работает более или менее в Chrome, но при использовании Internet Explorer 9, каретка, кажется, выходит из положения.

Кажется, ширина контейнера с одним контейнером не соответствует ширине, которую имеет этот символ, когда он вставляется в строку.

Я предполагаю, что это как-то связано с тем, как рассчитывается размер буквы на шаге 2. Но я не могу понять, как решить эту проблему.

Кто-нибудь имеет опыт работы с этой проблемой или указывает мне правильное направление с какой-то литературой, блогами apis, чем-нибудь? - это было бы прекрасно!

редактировать: вот ссылка на то, что я получил до сих пор;

NB: работает в Chrome и имеет упомянутый дефект в ie: 9 и 10, он сломан в Firefox:)

Answer 1

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

var text = $content.text(),
    positions = [0],
    $ghost = $("<span class='ghost'>").appendTo($content);
for (var i = 1; i < text.length; i++) {
    $ghost.text(text.substring(0, i));
    positions.push($ghost.width());
}
$ghost.remove();

Это CSS, который вам нужен:

.ghost {
    visibility: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
}

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