JavaScript를 사용하여 모든 텍스트를 선택 해제하는 기능이 있습니까?


100

선택한 모든 텍스트를 선택 취소하는 기능이 자바 스크립트에 있습니까? 나는 그것이 같은 단순한 전역 함수가되어야한다고 document.body.deselectAll();생각한다.

답변:


166

이 시도:

function clearSelection()
{
 if (window.getSelection) {window.getSelection().removeAllRanges();}
 else if (document.selection) {document.selection.empty();}
}

이렇게하면 모든 주요 브라우저에서 일반 HTML 콘텐츠의 선택이 지워집니다. 텍스트 입력이나 <textarea>Firefox에서 선택을 지우지 않습니다 .


25
window.getSelection().removeAllRanges();현재 모든 브라우저에서 작동 하는지 확인할 수 있습니다 . 라이브 데모 : jsfiddle.net/hWMJT/1
Šime Vidas

<input id = 'but'type = 'button'value = 'click'/ onclick = 'clearSelection ()'>과 같은 버튼을 클릭해야합니다
Ankur

1
@ Šime-정말 아닙니다. 버튼이 포커스를받을 때 선택이 손실되기 때문에 "작동"합니다. 증명 -코드가 주석 처리되고 선택은 여전히 ​​지워집니다.
그림자 마법사 귀는 당신을위한

@Shadow 다음은 적절한 데모입니다. jsfiddle.net/9spL8/3removeAllRanges()메서드는 현재 모든 브라우저에서 단락 내의 텍스트 또는 유사한 비 양식 필드 요소에 대해 작동합니다. 양식 필드 (예 : 텍스트 영역)의 경우이 방법은 IE9 및 FF5에서 작동하지 않습니다.
Šime Vidas 2011

1
표준을 준수하고 독점 코드는 항상 마지막에 실행해야하므로 편집, window.getSelection().removeAllRanges(); 먼저 사용하십시오 . 2004 년 또는 4004 표준 준수 코드는 항상 궁극적으로 우리가 사용하는 코드이므로 예외없이 먼저 감지하십시오!
John

27

다음은 텍스트 입력 및 텍스트 영역을 포함하여 모든 선택 항목을 지우는 버전입니다.

데모 : http://jsfiddle.net/SLQpM/23/

function clearSelection() {
    var sel;
    if ( (sel = document.selection) && sel.empty ) {
        sel.empty();
    } else {
        if (window.getSelection) {
            window.getSelection().removeAllRanges();
        }
        var activeEl = document.activeElement;
        if (activeEl) {
            var tagName = activeEl.nodeName.toLowerCase();
            if ( tagName == "textarea" ||
                    (tagName == "input" && activeEl.type == "text") ) {
                // Collapse the selection to the end
                activeEl.selectionStart = activeEl.selectionEnd;
            }
        }
    }
}

당신의 선택은 첫 번째 줄에서 어딘가에 시작하고 큰 텍스트 필드가 포함 된 경우 작동하지 않습니다
Vyachaslav Gerchicov을

1
@VyachaslavGerchicov : 그것은 신속하게 만든 간단한 예제 때문 아마 당신은 주요 외부 선택을 종료하면 <div>다음 mouseup이벤트가 발생하지 않습니다. 대신 문서에 mouseup 핸들러를 넣으면 괜찮을 것입니다 : jsfiddle.net/SLQpM/23
Tim Down

이는 요소를 드래그 할 때 사용자 선택 CSS를 지원하지 않는 이전 브라우저에서 훌륭한 해결 방법입니다. 마우스 이동 콜백에서 clearSelection ()을 호출합니다.
Geordie 2017 년

6

Internet Explorer 의 경우 document.selection 개체 의 빈 메서드 를 사용할 수 있습니다 .

document.selection.empty ();

브라우저 간 솔루션에 대해서는 다음 답변을 참조하십시오.

Firefox에서 선택 취소


웹 사이트가 공개되어 있다면 (브라우저를 제어하는 ​​인트라넷이 아님) 좋은 생각이 아니라 크로스 브라우저가 아닙니다.
그림자 마법사 귀는 당신을위한

1
마법사 @Shadow - 사실,이 질문은 크로스 브라우저 솔루션을위한 관련이있을 수 : stackoverflow.com/questions/6186844/...
누가 복음 Girvin

@Luke는 OP가 당신이 준 것을 그대로 가져 갔기 때문에 다른 웹 사이트가 (아마도) 다른 브라우저간에 일관성이 없을 것이라는 점이 너무 나쁩니다.
그림자 마법사 귀는 당신을위한

제 생각에 브라우저 호환성은 우리가 제공해야하는 명백한 것입니다. 많은 개발자들은 그러한 차이점이 존재한다는 사실조차 알지 못하기 때문에 아는 사람들은 그들에게 알려야합니다. 이 옆으로, 나는 당신의 질문은 말했다 결코 잘못 , 그냥 실종 .
그림자 마법사 귀는 당신을위한

@Luke document.selection.clear()는 IE 에서만 작동 합니다 . 여기를 참조하십시오 : jsfiddle.net/9spL8/4 또한이 방법은 선택한 텍스트를 선택 해제하는 것이 아니라 제거 합니다. 텍스트를 선택 해제하려면 document.selection.empty()대신 사용하십시오.
Šime Vidas 2011

0

A에 대한 textarea최소한 10 개 문자 요소 다음은 작은 선택을 할 것이다 다음 두 번째과 선택 해제 반 후 :

var t = document.getElementById('textarea_element');
t.focus();
t.selectionStart = 4;
t.selectionEnd = 8;

setTimeout(function()
{
 t.selectionStart = 4;
 t.selectionEnd = 4;
},1500);

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.