범위가 w/contenteditable 인 여러 div를 선택/선택 하시겠습니까?

Question

contenteditable="true" divs 세트가 있다고 가정 해 보겠습니다.

<div id="0" contenteditable="true"></div> 
<div id="1" contenteditable..></div> 
<div...etc></div> 

나는 하나 개의 사업부를 가질 수 없습니다 여러 div의는 필수입니다. 둘 이상의 div의 콘텐츠를 어떻게 강조 할 수 있습니까? 범위 사용? 다른 건 없니?

Answer 1

답변은 브라우저에 따라 다릅니다. 범위를 사용하는 두 가지 방법에 대한 테스트는 this example을 참조하십시오. 최초로, 편집 가능한 범위마다 범위를 작성해, 모두 선택 영역에 추가하려고합니다. 두 번째는 두 개의 편집 가능한 내용 인 <div>을 포함하는 하나의 Range를 생성하려고 시도합니다.

결과 : 사용자가 하나 개 이상의 편집 가능한 요소에 사는 선택을 생성하는 모든 브라우저에서

• , 그것은 불가능하다;
• 파이어 폭스는 주요 브라우저 중 가장 관대합니다. 두 프로그래밍 방식 모두 작동합니다.
• Safari와 Chrome은 허용되지 않습니다. 어느 방법도 둘 이상의 편집 가능한 요소에서 콘텐츠를 선택하지 않습니다.
• 오페라 11은 선택 영역에서 여러 범위를 지원하지 않지만 편집 가능한 요소를 두 개 이상 포함하는 선택한 범위를 지원합니다.
• IE 이전 버전 9는 DOM Range 또는 다른 브라우저와 동일한 Selection API를 지원하지 않지만 동일한 TextRange 코드는 둘 이상의 편집 가능한 요소에서 선택을 허용하지 않습니다.

Answer 2

div 중 하나에서 선택을 시작한 결과 div가 contenteditable="false"으로 바뀔 수 있습니다.

$('div').bind("selectstart", function() { 
    $('div').attr("contenteditable", false); 
});​ 

Here's a fiddle to demonstrate (전용 크롬에서 테스트) : 이런 식으로 뭔가 당신에게 (jQuery를 사용하여) 아이디어를 제공합니다.

첫 번째 ContentEditable Div가 포커스를 얻는 예제를보십시오. 이렇게하면 보통대로 입력 할 수 있지만, 마우스 나 키보드를 사용하여 아무 것도 선택하자 마자 평소처럼 div에서 항목을 확장 할 수 있습니다.

분명히 여러 브라우저에서 작동하고 적절하게 contenteditable="true"으로 되돌아 가려면이 단계를 반복해야합니다. 그러나 나는 그 접근법이 유효하다고 생각한다.