편집 가능한 사업부 내가 편집 가능한 DIV를 사용하여 Highliting

Question

제거 "의 keyup"이벤트/

<div class="editableDiv" contenteditable="true"> 
    sdtgssdrsdrtyy ╚asasasarrstssdertrtyrtyrrty ☻aaaaaaaaaaaaaaaaadaafsdsf4n 
</div> 

나는 내가 hilighting의 jQuery 라이브러리를 사용한 비 ASCII 문자를 hilight하는 사용자에게 비 ASCII 문자를 표시하는 작업을 데를 발사하지 "hilight"클래스의 스팬을 추가하여 nonascii 문자를 강조 표시합니다. 다음과 같이 innerHTML을가 ...

<span class="highlight">╚</span>asasasarrstssdertrtyrtyrrty 
<span class="highlight">☻</span>aaaaaaaaaaaaaadaafsdsf4n 

강조가 잘 작동하지만, 유일한 문제가 발생 사용자가 비 ASCII 문자를 삭제할 때이다와 내가 innerHTML을 체크 할 때, 입력 된 문자도 hilighted 가도록 위치에서 입력을 시작합니다 그것은

<span class="highlight">☻aaa</span>aaaaaaaaaaaaaadaafsdsf4n 

내가 편집 DIV에 "의 keyup"이벤트를 사용하여이 문제를 해결하기 위해이 이벤트에 내가 비 ASCII 문자로 범위를 오토넷하고 ... 새로 입력 한 문자는 다음과 스팬 태그에 가지고 있음을 보여줍니다 새로 입력 한 문자를 새 스팬 태그에 넣고 이전 문자를 다시 삽입합니다. 새로운 입력 된 chacters에도 강조 표시가 없지만 이후에 다시 입력하면이 이벤트가 실행되지 않습니다. 내가 명시 적으로 사업부의 innerHTML을 변경 되었기 때문에

나는이 원인을 같은 단서를 가지고 있지 않은거야?이 있습니까? 도와주세요 .....

다음은의 keyup 기능 ....

입니다

$(document).on('keyup', ".editableDiv", function() { 

     var hilighterSpans = $(this).children(".highlight"); 

     hilighterSpans.each(function (x, y) { 

      var spanText = $(y).text().trim(); 

      if (spanText == "") { 
       $(y).remove(); 
      } 
      else { 

       var regex = new RegExp("[^\u0020-\u007E]+"); 
       var nonasciiChar = regex.exec(spanText); 

       if (nonasciiChar != "") { 

        var asciiChars = spanText.replace(nonasciiChar, ''); 

        var spannode1 = document.createElement('span'); 

        var spannode2 = document.createElement('span'); 
        spannode2.className = 'highlight'; 
        spannode2.innerHTML=nonasciiChar; 

        if (spanText.indexOf(nonasciiChar) == 0) { 
         $(spannode1).append(spannode2); 
         $(spannode1).append(asciiChars);       
        } 
        else { 
         $(spannode1).append(asciiChars); 
         $(spannode1).append(spannode2);       
        } 

        $(this).replaceWith(spannode1); 
       } 
      } 
     });  

    }); 

는

<span><span class="highlight">╚</span>assd</span> 
<span><span class="highlight">☻</span>aaa</span> 

이 문제의 원인이 될 수 있습니다 ... 다음과 같이 innerHTML을가 대체? 내가 강조 비 ASCII 문자에서 바로 입력 해보십시오 JSFiddle

JSFiddle for this problem

는 ..... 내가 먼저 새로운 입력 한 문자가 변경 비록이 (잘 작동 입력에 대한 현재 .... 새로운 입력 한 문자가 강조 표시를 해제하려면 위치는 이걸 조사해야합니다.) ...하지만 다시 입력하면 코드가 작동하지 않습니다 (키 업 이벤트가 시작되지 않습니다).

Answer 1

나는이 문제에 대한 해결책을 가지고하고 다른 사람들을 도울 수 있도록 사람과 공유하고 생각했다.

에 추가하기 리오의 solutiuon 즉 제조 스팬의 contentEditable = "FALSE"내가 추가 한 "Zero Width Space"("& # 8203") 문제를 해결 강조 각 스팬의 끝에.

JS Fiddle For the Solution.

<div class="editableDiv" contenteditable="true">sdtgssdrsdrtyy 
<span class="highlight" contenteditable="false">╚</span>&#8203;asasasarrstssdertrtyrtyrrty 
<span class="highlight" contenteditable="false">☻</span>&#8203;aaaaaaaaaaaaaadaafsdsf4n</div> 

이 정보가 도움이되기를 바랍니다.

Answer 2

내측 .highlight 범위가 편집 가능하기 때문에 문제가 발생했습니다. .

spannode2을 contenteditable="false"으로 설정하고 spannode2 요소를 만든 후에이 줄을 추가해야합니다.

spannode2.setAttribute('contenteditable', 'false'); 

은 초기 .highlight가 contenteditable="false"에 걸렸고되어 있는지 확인합니다.

간단히 말해서 .highlight 스팬에는 모두 contenteditable="false"이어야합니다.

는 실제로 "< 스팬>"의 contentEditable "true"로 설정 다른 요소 내에 중첩 될 때 삭제하고 백 스페이스 이벤트 무시 파이어 폭스에서 버그 년대 jsfiddle

Answer 3

보기 ...

이 링크를 통해 버그를 확인하실 수 있습니다 :) https://bugzilla.mozilla.org/show_bug.cgi?id=685452