>웹 프론트엔드 >CSS 튜토리얼 >한 번의 클릭으로 DIV 내의 모든 텍스트를 선택하는 방법은 무엇입니까?

한 번의 클릭으로 DIV 내의 모든 텍스트를 선택하는 방법은 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-12-11 10:22:21821검색

How to Select All Text Within a DIV with One Click?

한 번의 마우스 클릭으로 손쉽게 DIV 텍스트 선택

빠르고 편리한 텍스트 조작을 위해 전체 내용을 강조 표시하고 선택하는 것이 바람직한 경우가 많습니다. DIV 태그의 이를 통해 사용자는 선택한 텍스트를 드래그하거나 마우스 오른쪽 버튼을 클릭하여 복사하는 등의 작업을 쉽게 수행할 수 있습니다.

이를 수행하는 방법:

이를 수행하려면 다음을 수행합니다. 브라우저의 선택 기능을 활용하는 JavaScript 기능을 활용합니다. 작동 방식은 다음과 같습니다.

코드 조각:

function selectText(containerid) {
    if (document.selection) { // IE
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}

구현:

HTML에 다음을 포함합니다. ID가 있는 DIV 요소 내에서 텍스트를 선택하는 코드 "selectable":

<div>

사용자가 이 DIV 내의 아무 곳이나 클릭하면 위의 JavaScript 기능이 실행되어 해당 내용이 모두 강조 표시됩니다. 이를 통해 수동으로 선택할 필요 없이 텍스트를 매우 쉽게 조작할 수 있습니다.

위 내용은 한 번의 클릭으로 DIV 내의 모든 텍스트를 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.