사업부 편집 및 ... 자세히

Question

음,

는이 같은
... 같은 단어에 사업부 contentEdible 속성에, 단어를 대체하지만, 포맷 할 필요가 이에
(단어 대체 : 공) : 사용자가 교체가 일어나는 텍스트를 입력하는 동안이, dinamically 일어나는의 contentEditable에서
<div> My <font style="color:blue;">balls</font> are big </div>

합니다. onkeydown, onkeyup 또는 onkey press 같은 간단한 이벤트가이 부분을 해결할 수 있다고 생각합니다. 하지만 문제는 탈주 자의 말입니다. 내가 tryed 한 후에는 단어가 바뀌기 전에 머물러 있어야합니다. 나는 js 코드를 작성하고, jquery 스크립트를 찾았지만,이 모든 경우에 실패했습니다 ...

어느 쪽의 아이디어 나 트릭이 있습니까?

나는 생각한다 : -> 포맷되지 않은 단어의 길이를 기록한다. ->이 단어 삭제 -> 새로운 단어를 입력하십시오. -> 캐럿을 사용하여 걸어 가면서이 형식의 단어 길이를 기준으로 위치를 지정하십시오. -> 그렇습니까? 추신 :이 div의 어느 위치에서나 한 단어를 배려해야합니다.

나는 위에서 말한 것을 수행하는이 코드를 작성하는 방법을 모른다.

내가 틀렸다면 수정하십시오.

아직 감사합니다.

수정 [1] :이 작업을 수행하려면 Mozilla Firefox, 구체적으로;

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