파이어 폭스 contenteditable wordwrap을 수정하는 방법?

Firefox에서만이 문제가 발생합니다. keyup 이벤트에서 범위에 대한 업데이트를 수행하면 왼쪽 화살표 키를 사용하여 줄 시작 부분에서 끝 부분까지 캐럿을 이동할 수 없습니다.파이어 폭스 contenteditable wordwrap을 수정하는 방법?

참조 : jsfiddle

<div id="bE" contenteditable="true">blah blah blah... enough to fill more than one line<br></div> 

bE.addEventListener("keyup",KU); 
function KU() 
    { 
    var sel=window.getSelection(); 
    var range=sel.getRangeAt(0).cloneRange(); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
    }

내가 범위를 얻고 변경하지 않고 다시 다시 절약 여기하고있어 모든. 검색 및 범위를 저장 (아무것도 변경하지 않고)이 문제가 발생합니다. 정말 효과가 있어야합니다. 다른 브라우저에서도 잘 작동합니다.

출처

2014-11-06 poby

여기에서 문제가 보이지 않습니다. 사용자가 두 번째 줄에서 무언가를 변경 한 후에 왼쪽 화살표 키를 사용하여 첫 번째 줄로 돌아갈 수 있어야한다고 말하고 있습니까? –

변경되지 않습니다. 두 번째 줄에 커서를 올리면됩니다 (단어 줄 바꿈 이후). 그런 다음 왼쪽 화살표 키를 사용하여 첫 번째 줄로 돌아갑니다. 파이어 폭스에서는 불가능하다. 다른 브라우저는 작동한다. – poby

문제는 파이어 폭스에서 사용자가 보는 캐럿 위치와 문서에서의 표현 사이에 불일치가 있다는 것입니다. 즉, 한 줄 끝의 위치와 다음 줄의 시작 위치가 시각적으로 다른 반면, 문서의 같은 지점에 매핑합니다. 크롬 및 다른 WebKit와 유사한 브라우저에서는 줄 끝의 공백 뒤에 보이는 위치가 존재하지 않기 때문에이 문제가 존재하지 않습니다. 공백은 렌더링되지 않고 캐럿은 줄의 시작에서 선행 단어의 끝으로 곧장 이동합니다. 이것은 또한 파이어 폭스 접근법보다 개념적으로 더 나은 것으로 보인다. 줄 바꿈이 단어 사이를 이동하는 데 필요한 화살표 키 누름의 수에 영향을 미치기를 기대하지 않기 때문이다.

해결책으로, removeAllRanges() 및 addRange()을 호출하기 전에 선택한 범위가 현재 선택된 범위와 동일한 지 확인하는 것이 좋습니다.

출처

2014-11-06 12:27:53

변경을 필요로하지만 솔루션이 좋은 경우에만 범위를 업데이트하도록 코드를 고정하여 수정했다. 그 수치스런 contenteditable은 모든 브라우저에서 그런 난장판이며 심지어 아무도 행동을 취해야하는 방법을 정확히 고치거나 표준화하려는 경향이 없습니다. – poby

파이어 폭스 contenteditable wordwrap을 수정하는 방법?

답변

관련 문제