2017-01-31 4 views
10

나는 내용 편집 가능한 속성을 여러 스팬은 다음과 같이 true로 설정 한 :다수의 contentEditable, 화살표 키를 사용하여 범위의 끝 carret을 이동할 수 없습니다

<span contentEditable='true'> value</span><span contentEditable='true'> value</span><span contentEditable='true'> value</span> 

https://jsfiddle.net/du7g39cz/

문제는 내가 때이다 화살표 키를 사용하여 스팬 요소를 탐색 할 때 carret이 마지막 심볼에 도달하면 blur 이벤트가 호출되므로 개별 span 끝에 도달 할 수 없습니다.

MS Edge를 제외한 모든 브라우저에서이 동작을 재현 할 수 있습니다.

나는 단 하나의 콘텐츠 편집 가능 상위를 유지하고 싶지 않습니다. 사용자가 전체 단락을 쉽게 삭제할 수 있기 때문에 intenion은 한 번에 한 단어 만 수정할 수 있습니다.

답변

2

브라우저 버그 인 것 같습니다.

span[contentEditable] { padding: 1px; } 

https://jsfiddle.net/jimbo2150/du7g39cz/2/

: 그것은 단지 스팬에 패딩의 양을 추가하는 것은 문제를 해결하는 것, 그러나 나를 위해 파이어 폭스에서 일어나는