여러 텍스트 선택 브라우저를 지원하는 방법은 무엇입니까?

Question

최종 사용자가 HTML 문서의 텍스트 섹션을 선택하고 주석을 달 수있는 웹 기반 주석 도구를 구축하고 있습니다. 프로그래밍 방식으로 말하기, 선택한 텍스트 및 해당 범위에 액세스하고 작업하는 것은 "window.getSelection"및 "getRangeAt"를 사용하여 간단합니다.

그러나이 모든 것을 크로스 브라우저 응용 프로그램에 넣으려고하면 문제가 발생합니다. Firefox에서 모든 기능을 찾을 수 있지만 Safari에서 HTML 버튼 (예 : '주석'버튼)을 클릭하면 버튼을 클릭하면 텍스트 캐럿의 위치가 변경되는 것처럼 현재 사용자 텍스트가 사라집니다. window.getSelection에 액세스하려고 시도하는 내 코드는이 버튼의 스크립트에서 실행되고 선택 항목이 없다고보고합니다.

텍스트를 선택하고 "굵게"또는 "글꼴 변경"을 클릭하는 동작과 메커니즘이 내 주석 기능에 해당하므로 Google 워드 프로세서, 특히 워드 프로세싱 응용 프로그램에서 어떻게 처리되는지 살펴 보았습니다. Google 문서 도구에서는 수정 될 문서의 텍스트를 iframe에로드합니다. 이 문제를 해결하기 위해 파이어 폭스는 여러 개의 프레임 또는 iframe이 포함 된 웹 페이지에서 다중 선택 범위를 지원합니다. 즉, 기본 페이지에서 텍스트 섹션을 선택하고 iframe에서 텍스트의 개별 섹션을 선택하여 첫 번째 선택 항목을 사라지게 할 수 있습니다. 이 Google 문서 도구 솔루션은 Firefox와 Safari (내가 관심있는 두 브라우저)에서 작동합니다. 그러나이 솔루션을 테스트 할 간단한 예제 페이지를 만들면 Safari에서 작동하지 않습니다. 버튼을 클릭하거나 루트 페이지 (iframe 외부)에서 텍스트를 선택하면 현재 선택된 iframe이 사라집니다.

누구나 내가이 문제를 해결하기 위해 여기에없는 것을 알고 있습니까? 또는이 방법을 사용하기 위해 다른 방법을 제안하십시오.

Answer 1

나는 파이어 폭스가 밖으로의 상자 지옥, 파이어 폭스도 하나의 프레임에 복수의 선택을 지원

여러 프레임

를 포함하는 웹 페이지에서 다중 선택 범위를 지원 배웠습니다! (다음 텍스트의 별도의 조각에 Ctrl 키를 누른 상태에서 마우스를 드래그 클릭 클릭 - 드래그를보십시오.) 내가 HTML 버튼을 클릭했을 때 즉시 발견 Safari에서

현재 사용자 텍스트 선택이 사라지고, 클릭 것처럼 버튼이 텍스트 캐리지의 위치를 ​​변경했습니다.

Windows 용 Safari 3.2.1에서 지원됩니다. < 버튼>, < input type = "button"> 또는 <> 버튼을 클릭하면 다른 프레임에있는 경우 회색으로 표시되지만 그 위치는 그대로 유지됩니다. 'window.getSelection()'은 평소와 같이 계속 작동합니다.

테스트 케이스를 게시 할 수 있습니까? 사파리 버전으로 인해 오작동이 날 수 있습니까?

Answer 2

(click 또는 mouseup 이벤트 대신) 버튼의 mousedown 이벤트까지 이벤트 처리기를 후크합니다. 이 옵션을 선택하면 현재 선택 항목을 지울 수 있습니다.

변수에 선택 항목을 저장하고 버튼에 클릭 이벤트가 발생하는 경우에만이를 사용하여 사용자 경험을 유지할 수 있습니다. 이처럼 : 내 머리 위로 떨어져

<button onmousedown="sel = window.getSelection()" onclick="alert(sel)">What's the selection?</button> 

Answer 3

, 나는 당신의 쉬운 솔루션, 당신은 걱정하지 않아도 이런 식으로 텍스트 선택에 이벤트 처리기를 부착하고 버퍼에 현재 선택 사항을 저장하는 것입니다 생각 타이밍에 대해서.

이 페이지에 불을 지르고를 열고 다음 코드 실행

var buffer = ''; 
$('p').mouseup(function() { 
    buffer = window.getSelection(); 
}); 

당신은 당신이 원하는대로 선택하고 실행하여 마지막으로 선택한 텍스트를 볼 수 있습니다 :

console.log(buffer); 

짜잔, 클릭/타이밍 문제 해결을 선택 취소하십시오 :)