Div Editable and More ... Подробнее - PullRequest
Новая
       11

Div Editable and More ... Подробнее

1 голос
/ 29 июля 2010

Ну

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

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

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

У кого-нибудь есть какие-то идеи или уловки?

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

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

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

Пока, спасибо!

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

1 Ответ

0 голосов
/ 30 июля 2010

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

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

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(); 
    }   
}
...