캐럿/커서 위치를 contenteditable div의 끝에 설정합니다.

Question

contenteditable div의 경우, 여러 개의 FireFox 관련 문제를 해결할 수 있습니다. div의 끝에 br 태그를 추가해야했습니다.

이것은 실제로 Google 플러스가 content 태그를 사용하여 contentEditable div 로직을 처리하는 방법입니다.

이제 파이어 폭스에서 div의 끝으로 커서를 이동하면 캐리지가
태그 뒤에오고 타격 공간이 다음 줄로 이동한다는 것을 의미합니다.

여기에서 동작을 테스트 할 수 있습니다 : jsFiddle 버튼을 클릭하여 스페이스 키를 누르십시오. BR 태그를 무시하거나 대신 커서 위치를 이동하려면이 코드를 변경하는

function placeCaretAtEnd(el) { 
      el.focus(); 
      if (window.getSelection){ 
       if (typeof window.getSelection != "undefined" 
         && typeof document.createRange != "undefined") { 
        var range = document.createRange(); 
        range.selectNodeContents(el); 
        range.collapse(false); 
        var sel = window.getSelection(); 
        sel.removeAllRanges(); 
        sel.addRange(range); 
       } else if (typeof document.body.createTextRange != "undefined") { 
        var textRange = document.body.createTextRange(); 
        textRange.moveToElementText(el); 
        textRange.collapse(false); 
        textRange.select(); 
       } 
      } 
     } 

그것이 가능할 것이다 : 나는 범위의 마지막 위치로 캐럿을 이동하려면 다음 코드를 사용하고

br 태그 바로 전에?

Answer 1

다른 사람에게 도움이되는지 알지 못합니다. 이것은 크로스 브라우저에서는 작동하지 않지만 FireFox에만 국한된 문제이며 BR 태그로 범위/선택을 처리하는 방식 때문에 문제가 해결 된 것으로 보입니다.

나는 기본적으로 그냥 난 단지 파이어 폭스를 위해이 일을하고 내 기능에

range.setEndBefore($(el).find('br')[0]); 

그래서 BR 전 범위의 끝을 설정할 수 있습니다

: 여기

function placeCaretAtEnd(el) { 
        el.focus(); 
        if (window.getSelection){ 
         if (typeof window.getSelection != "undefined" 
           && typeof document.createRange != "undefined") { 
          var range = document.createRange(); 
          range.selectNodeContents(el); 
          range.collapse(false); 
          if ($('#browser-version-check').val() == 'firefox') { 
           range.setEndBefore($(el).find('br')[0]); 
          } 
          var sel = window.getSelection(); 
          sel.removeAllRanges(); 
          sel.addRange(range); 
         } else if (typeof document.body.createTextRange != "undefined") { 
          var textRange = document.body.createTextRange(); 
          textRange.moveToElementText(el); 
          textRange.collapse(false); 
          textRange.select(); 
         } 
        } 
       } 

을 그리고 업데이트 된 jsfiddle http://jsfiddle.net/mstefanko/fG5kJ/2/입니다 , 브라우저 검사를 포함하지 않으므로이 데모는 FireFox에서만 올바르게 작동합니다.