Div редактируемые и многое другое ... Больше

Question

Ну,

Мне нужно заменить слово, в сНу contentEdible собственности на, одним и тем же словом, но отформатирован ...
Как это:
<div> My balls are big </div>

Для этого (заменить слово: шары):
<div> My <font style="color:blue;">balls</font> are big </div>

в виде contentEditable это происходит динамически, в то время как пользователь должен набрать текст на замену происходит. Я думаю, что простое событие onkeydown, onkeyup или onkey press может решить эту часть. Но, проблема с кареткой, что после всего, что я пробовал, она остается перед заменой слова, когда нужно оставаться после. Я попытался написать код js, попробовал найти некоторые jquery-скрипты, но все они не смогли в этой ситуации ...

У кого-нибудь есть идея или трюк?

Я думаю: -> Запишите длину слова неформатированного. -> Удалить слово -> Положите новое слово форматированным. -> Прогулка с кареткой, чтобы позиционировать эту длину форматированного слова. -> Это? PS: Я должен рассматривать слово в любом месте этого div.

Я не знаю, как написать этот код, который делает то, что я говорю выше.

Исправьте меня, если я ошибаюсь.

С тех пор, спасибо!

Редактировать [1]: Я хочу, чтобы это работало на Mozilla Firefox, specificlly;

Answer 1

У меня есть только IE6/7 на этой машине, но, возможно, вы можете применить эту концепцию к другим версиям браузера Диапазонов (или, возможно, это кросс-браузер?).

В основном мы сохраняем позицию курсора, сделать наш поиск/замена, а затем поместите курсор туда, где он был:

HTML:

<div id="content" contentEditable="true" onkeyup="highlight(this)">This is some area to type.</div> 

и сценарий:

function highlight(elem) { 
// store cursor position 
var cursorPos=document.selection.createRange().duplicate(); 
var clickx = cursorPos.getBoundingClientRect().left; 
var clicky = cursorPos.getBoundingClientRect().top; 
// copy contents of div 
var content = elem.innerHTML; 
var replaceStart = '<font style="color:blue">'; 
var replaceEnd = '</font>'; 
// only replace/move cursor if any matches 
// note the spacebands - this prevents duplicates 
if(content.match(/ test /)) { 
    elem.innerHTML = content.replace(/ test /g,' '+replaceStart+'test'+replaceEnd+' '); 
    // reset cursor and focus 
    cursorPos = document.body.createTextRange(); 
    cursorPos.moveToPoint(clickx, clicky); 
    cursorPos.select(); 
    } 
}