마우스를 한 번 클릭하여 모든 DIV 텍스트 선택
사용자가 DIV를 클릭할 때 DIV 태그의 내용을 강조 표시/선택하는 방법...모든 텍스트가 강조 표시/선택되므로 사용자가 마우스로 텍스트를 수동으로 강조 표시할 필요가 없으며 텍스트를 일부 놓칠 수도 있습니다.
예를 들어, 아래와 같이 DIV가 있다고 가정합니다.
<div id="selectable">http://example.com/page.htm</div>
...사용자가 해당 URL 중 하나를 클릭하면 전체 URL 텍스트가 강조 표시되어 브라우저에서 선택한 텍스트를 쉽게 끌어다 놓거나 마우스 오른쪽 버튼을 클릭하여 전체 URL을 복사할 수 있습니다.
감사합니다!
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);
}
}<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>이제 ID를 인수로 전달해야 합니다. 이 경우에는 "선택 가능"하지만, chiborg가 언급한 jQuery를 사용하지 않고도 어디서나 여러 번 사용할 수 있도록 더 전역적입니다.
업데이트 2017:
노드의 내용 호출 선택하기
window.getSelection().selectAllChildren(
document.getElementById(id)
);
이 기능은 IE9+(표준 모드)를 포함한 모든 최신 브라우저에서 작동합니다.
실행 가능한 예:
function select(id) {
window.getSelection()
.selectAllChildren(
document.getElementById("target-div")
);
}#outer-div { padding: 1rem; background-color: #fff0f0; }
#target-div { padding: 1rem; background-color: #f0fff0; }
button { margin: 1rem; }<div id="outer-div">
<div id="target-div">
Some content for the
<br>Target DIV
</div>
</div>
<button onclick="select(id);">Click to SELECT Contents of #target-div</button>아래의 원래 답변은 다음과 같이 사용되지 않습니다.window.getSelection().addRange(range); 더 이상 사용되지 않습니다.
원본 답변:
위의 모든 예는 다음을 사용합니다.
var range = document.createRange();
range.selectNode( ... );
그러나 문제는 DIV 태그 등을 포함한 노드 자체를 선택한다는 것입니다.
OP 질문에 따라 노드의 텍스트를 선택하려면 대신 호출해야 합니다.
range.selectNodeContents( ... )
따라서 전체 스니펫은 다음과 같습니다.
function selectText( containerid ) {
var node = document.getElementById( containerid );
if ( document.selection ) {
var range = document.body.createTextRange();
range.moveToElementText( node );
range.select();
} else if ( window.getSelection ) {
var range = document.createRange();
range.selectNodeContents( node );
window.getSelection().removeAllRanges();
window.getSelection().addRange( range );
}
}
순수한 CSS4 솔루션이 있습니다.
.selectable{
-webkit-touch-callout: all; /* iOS Safari */
-webkit-user-select: all; /* Safari */
-khtml-user-select: all; /* Konqueror HTML */
-moz-user-select: all; /* Firefox */
-ms-user-select: all; /* Internet Explorer/Edge */
user-select: all; /* Chrome and Opera */
}
user-select는 CSS 모듈 레벨 4 사양으로, 현재 초안이며 비표준 CSS 속성이지만 브라우저는 이를 잘 지원합니다. #search=user-select를 참조하십시오.
.selectable{
-webkit-touch-callout: all; /* iOS Safari */
-webkit-user-select: all; /* Safari */
-khtml-user-select: all; /* Konqueror HTML */
-moz-user-select: all; /* Firefox */
-ms-user-select: all; /* Internet Explorer/Edge */
user-select: all; /* Chrome and Opera */
}<div class="selectable">
click and all this will be selected
</div>사용자에 대한 자세한 내용 읽기MDN을 선택하고 w3schools를 사용하십시오.
Neuroxik의 답변은 정말 도움이 되었습니다.크롬은 외부 div를 클릭했을 때 작동하지 않아 문제가 발생했을 뿐입니다.새 범위를 추가하기 전에 이전 범위를 제거하는 문제를 해결할 수 있습니다.
function selectText(containerid) {
if (document.selection) {
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);
}
}
<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>
내용 편집 가능한 항목(일반 입력이 아닌)의 경우 selectNodeContents(selectNode만 사용하는 것이 아니라 selectNodeContents)를 사용해야 합니다.
참고: "문서"에 대한 모든 참조.선택" 및 "createTextRange()"는 IE 8 이하용입니다.당신이 이런 까다로운 일을 하려고 한다면 그 괴물을 지지할 필요가 없을 것입니다.
function selectElemText(elem) {
//Create a range (a range is a like the selection but invisible)
var range = document.createRange();
// Select the entire contents of the element
range.selectNodeContents(elem);
// Don't select, just positioning caret:
// In front
// range.collapse();
// Behind:
// range.collapse(false);
// Get the selection object
var selection = window.getSelection();
// Remove any current selections
selection.removeAllRanges();
// Make the range you have just created the visible selection
selection.addRange(range);
}
텍스트 영역 필드를 사용하여 다음을 사용할 수 있습니다. (Google을 통해)
<form name="select_all">
<textarea name="text_area" rows="10" cols="80"
onClick="javascript:this.form.text_area.focus();this.form.text_area.select();">
Text Goes Here
</textarea>
</form>
이것이 대부분의 웹사이트들이 하는 방법입니다.그들은 텍스트 영역처럼 보이지 않도록 CSS로 스타일을 만듭니다.
이 스니펫은 사용자가 필요로 하는 기능을 제공합니다.당신이 해야 할 일은 그 div에서 fnSelect를 활성화하는 이벤트를 추가하는 것입니다.이렇게 하면 안 되고 작동하지 않을 수도 있는 빠른 해킹은 다음과 같습니다.
document.getElementById("selectable").onclick(function(){
fnSelect("selectable");
});
분명히 스니펫에 연결된 것이 포함되었다고 가정합니다.
나는 이 기능을 jQuery 플러그인으로 포장하는 것이 유용하다는 것을 알았습니다.
$.fn.selectText = function () {
return $(this).each(function (index, el) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(el);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(el);
window.getSelection().addRange(range);
}
});
}
그래서, 그것은 재사용 가능한 해결책이 됩니다.그러면 다음을 수행할 수 있습니다.
<div onclick="$(this).selectText()">http://example.com/page.htm</div>
그리고 그것은 div에서 테스트를 선택할 것입니다.
이 간단한 해결책은 어떻습니까? :)
<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">
물론 당신이 언급한 것처럼 그것은 div-construction이 아니지만, 여전히 나를 위해 작동합니다.
니코 레이:이 간단한 해결책은 어떻습니까? :)
`<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">`
.....
코드 이전:
<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly">
다음 코드:
<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly" onclick="this.select();" id="selectable">
="이것"을 클릭하면 바로 이 부분이 나옵니다.내 코드에서 select(");"id="selectable"이 정상적으로 작동했습니다.마우스를 한 번 클릭하여 내 코드 상자의 모든 항목을 선택합니다.
니코 레이를 도와주셔서 감사합니다!
css 속성 user-select를 all로 설정하면 쉽게 달성할 수 있습니다.다음과 같이:
div.anyClass {
user-select: all;
}이것을 시도해 보십시오. altn이 oncontext 메뉴에 추가하면 이러한 방식으로 입력할 수 있는 확장자에 빠르게 액세스할 수 있습니다.
<div onclick='window.getSelection().selectAllChildren(this)' id="selectable">http://example.com/page.htm</div>요소가 iframe의 일부인 경우에도 작동하는 솔루션
element.ownerDocument?.getSelection()?.selectAllChildren(element);
$.fn.selectText = function () {
return $(this).each(function (index, el) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(el);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(el);
window.getSelection().addRange(range);
}
});
}
위 답변은 addRange가 이전에 추가된 범위를 제거하기 때문에 Chrome에서 작동하지 않습니다.저는 CSS를 사용한 가짜 선택 외에 이것에 대한 해결책을 찾지 못했습니다.
export const selectText = (containerId) => {
let selection = window.getSelection()
let myElement = document.getElementById(containerId)
if (selection.rangeCount > 0) {
selection.removeAllRanges()
}
let range = document.createRange()
range.selectNode(myElement)
selection.addRange(range)
}**The most simplest answer works in all browsers**
언급URL : https://stackoverflow.com/questions/1173194/select-all-div-text-with-single-mouse-click
'programing' 카테고리의 다른 글
| div 요소 내에서 이미지를 수평으로 중앙에 배치하는 방법은 무엇입니까? (0) | 2023.08.13 |
|---|---|
| docker_compose.yml의 링크와 dependent_on 간의 차이 (0) | 2023.08.13 |
| 서로 다른 두 Get-ChildItem 호출의 결과를 단일 변수로 결합하여 동일한 처리를 수행합니다. (0) | 2023.08.13 |
| 콤보 상자에서 선택한 항목의 색인을 찾으려면 어떻게 해야 합니까? (0) | 2023.08.13 |
| 문자열로서의 Excel 셀 값은 문자열로 저장되지 않습니다. (0) | 2023.08.13 |