자바 스크립트 동작 선택 기준

간략한 소개

선택은 현재 작동 활성 선택 영역 (즉, 텍스트를 강조)입니다.

비 IE 브라우저 (파이어 폭스, 사파리, 크롬, 오페라에서 사용 가능 ) window.getSelection () 오브젝트의 선택을 얻기 위해, 문서 작업의 방법은 표준 선택입니다 설명합니다. 에서 텍스트 내용의 대부분 https://developer.mozilla.org/en/DOM/Selection

기간

다음은 영어 문서를 몇 가지 측면에서 몇 가지 용어는 다음과 같습니다.

닻: 은 "시작점"영역을 선택합니다.
초점: 은 "끝점"영역을 선택합니다.
범위: 이 노드 또는 텍스트 노드의 일부를 포함하는 단편 (HTML 조각)입니다. 정상적인 상황에서, 같은 시간 범위에서 페이지 만있을 수 있습니다, 여러 범위가있을 수 있습니다 (건강 이상을 선택하려면 Ctrl 키를 사용하여,하지만 일부 브라우저는, 예를 들어, 크롬 허용하지 않습니다). 범위 선택은 개체로부터 수득 될 수 있고, 사용될 수있다 document.createRange () 메소드가 얻어진다.

재산

anchorNode: 반환 노드는 "시작 지점"이 포함되어 있습니다.
anchorOffset: anchorNode 오프셋 (offset)의 "시작 지점".
focusNode: 은 "엔드 포인트"를 포함하는 노드를 돌려줍니다.
focusOffset: focusNode의 "종점"오프셋.
isCollapsed: "시작 지점"과 "끝점"는 일치합니다.
Rngecount: 객체 선택에 포함 된 숫자 범위가 여러 건강을 가질 수있는 Ctrl 키를 사용하여, 일반적으로 범위가 돌려줍니다.

방법

getRangeAt (인덱스)

당신은 현재 선택 객체의 범위 객체를 얻는다.
인덱스 : 참조 rangeCount 속성.
반환 값 : 해당 범위 첨자 지수에 따라 오브젝트를 돌려줍니다.

붕괴 (인 parentNode 오프셋)

시작 및 종료 지점 (오프셋)에 대응하는 위치 특정 노드 (인 parentNode)을 병합.
인 parentNode : 포커스 (캐럿)이 노드에있을 것입니다.
오프셋 : 범위 [0, 1, 2, 3에 있어야 , parentNode.childNodes.length].

0 : 첫 번째 자식 노드 위치 결정.
1 : 두 번째 자식 노드 전에.
......
childNodes.length-1 : 현재 노드의 마지막 자식.
childNodes.length : 마지막 자식 후.

모질라 공식 문서를 0과 1의 언급 값은 테스트가 정확하지 않습니다. 문서가 매우 분명하지 않다도있다 "경우 문서는. 수정되지 않은 내용에 초점이 맞춰하고, 캐럿이 편집 깜박입니다."

확장 (인 parentNode 오프셋)

지정된 노드 (인 parentNode)에 대한 "최종 포인트"위치 (오프셋)가 지정.
"시작점"은 방향에 관계없이, "엔드 포인트"영역에 "시작점"에서, 새로운 선택을 이동하지 않는다 (새로운 "종점"일본어 "시작점"앞에있다).
인 parentNode는 : 초점이 노드 내에서 될 것입니다.
오프셋 : 마지막 1 인 parentNode 0을, 제일 인 parentNode.

수정 (변경, 방향, 단위)

초점 위치를 변경하거나 확장 |의 크기의 선택 좁힐
ALTER : 방법의 변화를. 포커스를 이동시키기 위해, "이동", "확장", 선택을 변경.
방향 : 이동 방향. 옵션 앞으로 값 | 되돌아 가기 또는 왼쪽 | 권리
단위 : 모바일 장치 또는 크기. 옵션 값, 문자 ","단어 ","문장 ","라인 ","단락 ","lineboundary ","sentenceboundary ","paragraphboundary "또는"documentboundary. "
파이어 폭스 4 / 썬더 버드 3.3 / 시몽 키 2.1 것 이 기능을 지원, 공식 문서 : https://developer.mozilla.org/en/DOM/Selection/modify

collapseToStart ()

은 "엔드 포인트는"뿐만 아니라, "시작 지점"의 selction, 더 범위를 이동합니다.

collapseToEnd ()

은 "출발점"뿐만 아니라, "엔드 포인트"의 selction, 더 범위를 이동합니다.

selectAllChildren (인 parentNode)

선택에 인 parentNode (인 parentNode 제외), 노드의 모든 자손은 원래의 선택 페이지를 폐기한다.

addRange (범위)

선택은 여러 범위가 될 수 있도록, 그들에게 선택 범위를 추가합니다.
크롬 여러 범위의 동시 존재를 허용하지 않습니다, 그것은 조금 다른 접근 방법과 파이어 폭스입니다.

removeRange를 (범위)

현재의 선택 범위에서 물체를 제거, 반환 값은 정의되지 않는다.
범위의 매개 변수에 오류가있을 것입니다 당신이 (document.createRange ()) 만든 경우 크롬도 파이어 폭스에서, 현재 변화 기능입니다.
()는 oSelction.getRangeAt을하는 경우에는 제공되지 않습니다.

removeAllRanges ()

anchorNode을 수행 한 후, focusNode가 널 (null)로 설정되어, 범위 내의 모든 객체 선택을 제거 선택된 어느 하나의 콘텐츠가 존재하지 않는다.

toString ()

라벨을 포함하지 않는, 일반 텍스트의 선택을 돌려줍니다.

containsNode (애노드 aPartlyContained)

노드 여부를 결정하는 것은 selction의 일부입니다.
양극 : 노드를 확인합니다.
aPartlyContained : 사실, 한 선택 양극에 속하는의 일부가 사실이 반환 같이, 거짓, 양극 모두 선택하는 경우는 true 반환에 속해야합니다.

document.activeElement

이 속성이 반환됩니다에는 "몸"이없는 경우, 요소가 현재 포커스가 반환 HTML5의 일부입니다. 정상적인 상황에서는 "텍스트 필드"또는 반환 "텍스트 상자를." 또한, "버튼", "무선"또는 "라디오 버튼」등, 맥 OS 시스템 (텍스트 박스, 텍스트 필드와 같은 텍스트 박스)가 아닌 입력 요소를 반환 할 수있다"를 드롭 다운리스트 "를 반환 할 수도있다.

속성 및 방법 :

지정한 selectionStart: 입력 선택 요소의 위치를 시작하는 것이 판독 될 수있다.
selectionEnd에: 엔드 포인트 선택 요소의 위치를 입력 읽을 수 있습니다.
setSelectionRange (시작, 끝): 입력 요소는 또한 selectionStart 값 selectionEnd에 배치

텍스트 상자없이 선택하는 경우, 지정한 selectionStart이 동일 지정한 selectionEnd 및 초점 위치입니다.
setSelectionRange 사용시 ()
끝은 시작 미만이고, 또한 selectionStart selectionEnd에가 종료 설정 말하는 경우는
길이 (textbox.value.length)보다 큰 시작 및 종료 파라미터의 입력란 콘텐츠는 시작 및 끝 값 속성의 길이로 설정하는 경우.
이 지정한 selectionStart와 selectionEnd에이 요소가 포커스를 잃었을 때, 그리고 지정한 selectionStart 지정한 selectionEnd의 사용은 여전히 포커스를 잃을 요소의 값을 얻을 수 있음을 의미하는 마지막 요소 선택의 관련 속성을 기록 할 것이라는 점을 언급 할 가치가있다. 이 기능을 할 수있는 경우 (표현이 초점 요소의 마지막 위치에 삽입) 매우 유용하다 "표현을 삽입합니다."

<텍스트 영역 ID = "텍스트 박스"> ABC中国EFG </ 텍스트 영역> 
<script 타입 = "텍스트 / 자바 스크립트"> 
창로드 = 함수 () { 
    VAR = document.getElementById를 텍스트 박스 ( '입력란'); 
    textbox.setSelectionRange (5, 2); 
    CONSOLE.LOG (textbox.selectionStart); // 2 
    CONSOLE.LOG (textbox.selectionEnd); // 2 
}; 
</ script>

<텍스트 영역 ID = "텍스트 박스"> ABC中国EFG </ 텍스트 영역> 
<script 타입 = "텍스트 / 자바 스크립트"> 
창로드 = 함수 () { 
    VAR = document.getElementById를 텍스트 박스 ( '입력란'); 
    textbox.setSelectionRange (9, 9); 
    CONSOLE.LOG (textbox.selectionStart); // 8 
    CONSOLE.LOG (textbox.selectionEnd); // (8) 
}; 
</ script>

지원 : 7 \ 8 \ IE6은 지원되지 않습니다, 크롬, 파이어 폭스, 오페라, 사파리가 지원됩니다.

참조 문서 : https://developer.mozilla.org/en/DOM/document.activeElement

document.designMode = 'ON';

선택의 시간 '에'document.designMode =이 지정한 selectionStart, 지정한 selectionEnd와는 오페라, 파이어 폭스, 사파리, 그리고 크롬에서 사용할 수 있지만 할 수없는 방법.

HTTPS : //www.cnblogs.com/rainman/archive/2011/02/27/1966482.html 재현