Изменить позицию курсора в contenteditable div после изменения innerHTML - PullRequest
Новая
       47

Изменить позицию курсора в contenteditable div после изменения innerHTML

12 голосов
/ 24 сентября 2010

У меня есть простой contenteditable div с некоторым текстом в нем. В событии onkeyup я хочу заменить весь контент (innerHTML) div на основе регулярного выражения.

Например,

HTML: 

some text, more text and $even more text

Функция, в которой я планирую получить весь текст с $ ($ даже в примере выше) и обернуть его в тег span: 

div.onkeypress = function() { 
     div.innerHTML.replace(/(some_regexp)/, "<span class='class'>$1</span>"); 
};

Проблема в том, что после такой замены курсор переходит на начало div. Я хочу, чтобы он остался там, где был раньше.

Я предполагаю, что мне нужно сохранить координаты курсора перед изменением, а затем каким-то образом использовать их, чтобы вернуть курсор назад, но как я могу это сделать? :)

Я пытался сохранить объект диапазона, но после редактирования я считаю, что он указывает на никуда.

Спасибо!

Ответы [ 3 ]

2 голосов
/ 28 сентября 2010

Проблема в том, что вы обновляете весь внутренний HTML, но меняется только небольшая его часть. Вы не можете использовать регулярное выражение и массовую замену. Вам необходимо отсканировать div и найти совпадения, создать из них текстовые диапазоны и обернуть содержимое диапазоном. См. http://www.quirksmode.org/dom/range_intro.html, Программное создание диапазона.

Тем не менее, я думаю, что это не сработает, если курсор находится в тексте, подлежащем замене, но это только начало.

1 голос
/ 17 января 2011

Я взял это с другого форума. Это решило мою проблему.

Хорошо, мне удалось обойти это, вот решение, если кому-то интересно:

Сохранить выбор x, y:

Код: 

cursorPos=document.selection.createRange().duplicate();
clickx = cursorPos.getBoundingClientRect().left; 
clicky = cursorPos.getBoundingClientRect().top;

Восстановить выбор:

Код: 

cursorPos = document.body.createTextRange();
cursorPos.moveToPoint(clickx, clicky);
cursorPos.select();

Вы можете увидеть это здесь:

http://www.tachyon -labs.com / sharpspell /

1 голос
/ 30 сентября 2010

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

например

Я не понимаю и вопрос

Позиция вопроса 5 и я заменяю

Я не понимаю и отвечаю

установить курсор в положение 5

http://ajaxian.com/archives/javascript-tip-cross-browser-cursor-positioning

http://hartshorne.ca/2006/01/23/javascript_cursor_position/

http://geekswithblogs.net/svanvliet/archive/2005/03/24/textarea-cursor-position-with-javascript.aspx

...