div에서 클립보드로 텍스트를 복사하는 방법
사용자가 이 단추를 클릭할 때 사용할 코드는 다음과 같습니다.
<button id="button1">Click to copy</button>
이 디브 안에 있는 텍스트를 어떻게 복사합니까?
<div id="div1">Text To Copy</div>
저는 위에서 제안한 해결책을 시도했습니다.하지만 그것은 충분히 크로스 브라우저가 아니었습니다.저는 일을 하기 위해 정말로 ie11이 필요했습니다.시도한 결과 다음과 같은 이점이 있었습니다.
<html>
<body>
<div id="a" onclick="copyDivToClipboard()"> Click to copy </div>
<script>
function copyDivToClipboard() {
var range = document.createRange();
range.selectNode(document.getElementById("a"));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();// to deselect
}
</script>
</body>
</html>
Firefox 64, Chrome 71, Opera 57, i11(11.472.17134.0), Edge(Edge)로 테스트됨HTML 17.17134)
2019년 3월 27일 업데이트.
웬일인지 그래.document.createRange()이전에는 IE11에서 작동하지 않았습니다.그러나 이제 Range 개체를 올바르게 반환합니다.그래서 그것을 사용하는 것이 더 낫습니다.document.getSelection().getRangeAt(0).
두 예시 모두 매력적으로 작동합니다 :)
Javascript:
function CopyToClipboard(containerid) { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select().createTextRange(); document.execCommand("copy"); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().addRange(range); document.execCommand("copy"); alert("Text has been copied, now paste in the text-area") } }<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button> <br /><br /> <div id="div1">Text To Copy </div> <br /> <textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>JQUERY(Adobe Flash에 따라 다름): https://paulund.co.uk/jquery-copy-to-clipboard
복사할 항목이 여러 개 있고 각각 별도의 "클립보드에 복사" 단추가 있는 경우에는 허용된 답변이 작동하지 않습니다.한 버튼을 클릭하면 다른 버튼이 작동하지 않습니다.
이들이 작동하도록 하기 위해 텍스트 선택을 새로 수행하기 전에 텍스트 선택을 지우도록 허용된 응답 기능에 코드를 추가했습니다.
function CopyToClipboard(containerid) {
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("copy");
}
}
selectNode() 매개 변수 1이 노드 유형 오류가 아닙니다.
코드를 이것으로 변경하고 작동합니다. (크롬용)
function copy_data(containerid) {
var range = document.createRange();
range.selectNode(containerid); //changed here
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
alert("data copied");
}<div id="select_txt">This will be copied to clipboard!</div>
<button type="button" onclick="copy_data(select_txt)">copy</button>
<br>
<hr>
<p>Try paste it here after copying</p>
<textarea></textarea>이 솔루션은 클립보드에 복사 후 텍스트 선택 취소를 추가합니다.
function copyDivToClipboard(elem) {
var range = document.createRange();
range.selectNode(document.getElementById(elem));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
}
<div id='myInputF2'> YES ITS DIV TEXT TO COPY </div>
<script>
function myFunctionF2() {
str = document.getElementById('myInputF2').innerHTML;
const el = document.createElement('textarea');
el.value = str;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
alert('Copied the text:' + el.value);
};
</script>
더 많은 정보: https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f
여기서 iOS를 포함한 다양한 브라우저에서 작동하는 코드를 볼 수 있습니다.
const copyToClipboard = (id) => {
var r = document.createRange();
r.selectNode(document.getElementById(id));
window.getSelection().removeAllRanges();
window.getSelection().addRange(r);
document.execCommand("copy");
window.getSelection().removeAllRanges();
};
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
const copyIOS = (id) => {
const text = document.getElementById(id).innerHTML;
if (!navigator.clipboard) {
const textarea = document.createElement("textarea");
textarea.value = text;
textarea.style.fontSize = "20px";
document.body.appendChild(textarea);
const range = document.createRange();
range.selectNodeContents(textarea);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
textarea.setSelectionRange(0, 999999);
document.execCommand("copy");
document.body.removeChild(textarea);
}
navigator.clipboard.writeText(text);
};
const copyTextById = (id) => {
if (isIOS) {
return copyIOS(id);
}
copyToClipboard(id);
};
window.copyTextById = copyTextById<div id="text">Text which you will copy</div>
<button onclick="copyTextById('text')">Click me</button>링크를 답변으로 추가하여 첫 번째 답변 아래에 있는 Aaron Labers의 의견에 더 많은 관심을 기울입니다.
이것은 매력적으로 작동합니다 - http://clipboardjs.com .clipboard.js 또는 min 파일을 추가하기만 하면 됩니다.시작하는 동안 클릭할 HTML 구성 요소가 있는 클래스를 사용하고 복사할 내용이 있는 구성 요소의 ID를 클릭 요소로 전달합니다.
솔루션을 수정하여 특정 ID 대신 클래스를 기준으로 여러 개의 div와 함께 작동합니다.예를 들어 코드 블록이 여러 개인 경우.이것은 div 클래스가 "code"로 설정되어 있다고 가정합니다.
<script>
$( document ).ready(function() {
$(".code").click(function(event){
var range = document.createRange();
range.selectNode(this);
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();// to deselect
});
});
</script>
위의 솔루션은 내용 편집 가능한 div에 대해 작동하지 않습니다.내용을 클립보드에 복사하려면 몇 가지 단계가 더 필요합니다.
클립보드에 편집 가능한 div 컨텐츠를 복사하는 방법은 다음과 같습니다.아이폰과 안드로이드에서 텍스트를 선택하는 것이 항상 쉬운 것은 아닙니다.복사 단추 하나로 모든 내용을 복사할 수 있습니다.
<div id="editor1" contenteditable="true"></div>
<button id="button1" onclick="CopyToClipboard()">COPY</button>
<script>
function CopyToClipboard() {
var copyBoxElement = document.getElementById('editor1');
copyBoxElement.contenteditable = true;
copyBoxElement.focus();
document.execCommand('selectAll');
document.execCommand("copy");
copyBoxElement.contenteditable = false;
alert("Text has been copied")
}
</script>
이 모든 것들은 저에게 효과가 없었습니다.하지만 저는 그 답이 저에게 효과가 있었던 질문의 사본을 발견했습니다.
여기 링크가 있습니다.
자바스크립트에서 클립보드에 복사하려면 어떻게 해야 합니까?
언급URL : https://stackoverflow.com/questions/36639681/how-to-copy-text-from-a-div-to-clipboard
'programing' 카테고리의 다른 글
| WSL2에서 Windows 10 Home과 함께 Docker Desktop을 사용할 때 도커 이미지의 위치를 변경하려면 어떻게 해야 합니까? (0) | 2023.08.20 |
|---|---|
| rxjs/Subject.d.ts 오류: 클래스 'Subject'가 기본 클래스 'Observable'의 확장을 잘못했습니다. (0) | 2023.08.20 |
| ID가 배열에 있는 mysql (0) | 2023.08.20 |
| SELECT FROM DUAL로 여러 행이 가능합니까? (0) | 2023.08.20 |
| SweetAlert2를 사용하여 탐지되지 않음(약속 없음) 취소 (0) | 2023.08.20 |