contenteditable div는 웹킷에서 실제로 편집 할 수 없습니다.

Question

contenteditable 속성이 true로 설정된 div가 있습니다. 그러나 텍스트를 입력 할 때 깜박이는 커서 또는 업데이트가 표시되지 않습니다. 포커스, keydown 및 keypress에 대한 이벤트 리스너를 추가하여 div가 수신 중인지 확인합니다.

어떻게 모든 적절한 이벤트가 실제로 실행되고 있지만 div의 내용이 적절하게 업데이트되지 않을 수 있습니까? 나는 이벤트의 기본 동작을 방지하는 것과 같은 펑키 한 일을하지 않습니다.

다른 프로젝트에서 몇 번이나 만족스러운 작업을 여러 차례 시도했기 때문에이 특정 페이지의 HTML 구조로 인해 버그가 발생했다는 것이 확실합니다. 이 문제는 Chrome과 Safari에서만 발생합니다. Firefox와 IE8은 괜찮습니다.

Answer 1

그래, 내 문제를 알아 냈어. 나는 CSS 속성 '-webkit-user-select'를 해당 div의 계층 구조를 요소로하여 none으로 설정했습니다. 따라서 커서가 내 contentEditable div 내에 위치 할 수 없게되었습니다.

흥미롭게도, 해당 '-moz-user-select'(계층 구조를 위로 설정하지 않았 음)는 Firefox와 같은 방식으로 영향을주지 않습니다.

Answer 2

이 코드를 알려 드리고 싶습니다. 그것은 당신을 도울지도 모른다! 전체 사이트에 대해 사용자 선택 및 설명 선을 사용하지 않도록 설정 한 다음 내용 선택 가능 필드를 재정 의하여 사용자가 선택할 수 있도록합니다.

html,body{ 
    -webkit-user-select: none; 
    -webkit-touch-callout: none; 
} 

*[contenteditable] { 
    -webkit-user-select: auto !important; 
}