클릭 버튼 클립보드에 복사
div 내부의 텍스트를 클립보드에 복사하려면 어떻게 해야 합니까?나는 div를 가지고 있고 클립보드에 텍스트를 추가할 링크를 추가해야 합니다.이것에 대한 해결책이 있습니까?
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="copy-text">copy Text</a>
텍스트 복사를 클릭한 후 +를 누르면 붙여넣어야 합니다.
2020년 업데이트:이 솔루션은 다음을 사용합니다.
execCommand이 답변을 작성하는 순간에는 그 기능이 괜찮았지만, 이제는 쓸모없는 것으로 간주됩니다.여전히 많은 브라우저에서 작동하지만 지원이 중단될 수 있기 때문에 사용이 권장되지 않습니다.
(jfriend00의 답변에 언급된 클립보드 API와는 별도로) 플래시가 아닌 다른 방법이 있습니다.텍스트를 선택한 다음 명령을 실행하여 페이지에서 현재 선택된 텍스트를 클립보드에 복사해야 합니다.
예를 들어, 이 함수는 전달된 요소의 내용을 클립보드에 복사합니다(PointZeroTwo의 주석에 있는 제안으로 업데이트됨).
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
작동 방식은 다음과 같습니다.
- 임시로 숨겨진 텍스트 필드를 만듭니다.
- 요소의 내용을 해당 텍스트 필드에 복사합니다.
- 텍스트 필드의 내용을 선택합니다.
- 다음과 같은 합니다.
document.execCommand("copy"). - 임시 텍스트 필드를 제거합니다.
요소의 내부 텍스트는 공백을 포함할 수 있습니다.예를 들어 암호를 사용하려면 다음을 사용하여 텍스트를 트리밍할 수 있습니다.$(element).text().trim()위의 암호로
여기에서 간단한 데모를 볼 수 있습니다.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />주요 문제는 현재 모든 브라우저가 이 기능을 지원하지는 않지만 다음과 같은 주요 브라우저에서 이 기능을 사용할 수 있다는 것입니다.
- 크롬 43
- 인터넷 익스플로러 10
- 파이어폭스 41
- 사파리 10
업데이트 1: 이는 순수 자바스크립트 솔루션(no jQuery)으로도 달성할 수 있습니다.
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />이제 # 없이 id를 전달합니다.
madzohan이 아래 댓글에서 보고한 것처럼, (파일을 로컬로 실행하는) 경우에 따라 Google Chrome의 64비트 버전에 이상한 문제가 있습니다.이 문제는 위의 비jQuery 솔루션으로 해결된 것 같습니다.
은 Madzohan과 Safari를 사용했습니다.document.execCommand('SelectAll')사하는대에를 사용하는 .select()(채팅 및 아래 설명에 명시된 대로).
PointZeroTwo가 코멘트에서 지적했듯이 코드를 개선하여 성공/실패 결과를 반환할 수 있습니다.이 jsFiddle에서 데모를 볼 수 있습니다.
업데이트: 텍스트 형식을 유지하는 복사
사용자가 StackOverflow의 스페인어 버전에서 지적했듯이 요소의 내용을 문자 그대로 복사하려면 위에 나열된 솔루션이 완벽하게 작동하지만 복사된 텍스트를 형식으로 붙여넣으려면(복사할 때) 그렇게 잘 작동하지 않습니다.input type="text"형식은 "손실됨"입니다.
은 편집 입니다.div그런 다음 그것을 사용하여 복사합니다.execCommand를 들어 복사 .예를 들어, 복사 단추를 누른 후 아래 내용 편집 가능한 상자에 붙여넣습니다.
function copy(element_id){
var aux = document.createElement("div");
aux.setAttribute("contentEditable", true);
aux.innerHTML = document.getElementById(element_id).innerHTML;
aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
document.body.appendChild(aux);
aux.focus();
document.execCommand("copy");
document.body.removeChild(aux);
}#target {
width:400px;
height:100px;
border:1px solid #ccc;
}<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>jQuery에서는 다음과 같습니다.
function copy(selector){
var $temp = $("<div>");
$("body").append($temp);
$temp.attr("contenteditable", true)
.html($(selector).html()).select()
.on("focus", function() { document.execCommand('selectAll',false,null); })
.focus();
document.execCommand("copy");
$temp.remove();
}#target {
width:400px;
height:100px;
border:1px solid #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>2016년 기준 편집
의 브라우저는 대부브는다사음을용을 사용하여 선택한 방식으로 을 가지고 있기 할 수 .document.execCommand("copy")그것은 선택을 통해 작동합니다.
새 창 열기와 같은 브라우저의 다른 작업과 마찬가지로 클립보드에 복사는 특정 사용자 작업(마우스 클릭)을 통해서만 수행할 수 있습니다.예를 들어 타이머를 통해 수행할 수 없습니다.
다음은 코드 예제입니다.
document.getElementById("copyButton").addEventListener("click", function() {
copyToClipboard(document.getElementById("copyTarget"));
});
function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
}input {
width: 400px;
}<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">다음은 조금 더 고급 데모입니다. https://jsfiddle.net/jfriend00/v9g1x0o6/
또한 clipboard.js를 사용하여 이 기능을 수행하는 사전 구축된 라이브러리를 얻을 수 있습니다.
답변의 오래된 역사적인 부분
보안상의 이유로 최신 브라우저에서는 JavaScript를 통해 클립보드에 직접 복사할 수 없습니다.가장 일반적인 해결 방법은 사용자가 직접 클릭해야만 트리거할 수 있는 플래시 기능을 사용하여 클립보드에 복사하는 것입니다.
이미 언급했듯이 ZeroClipboard는 복사를 수행하기 위해 플래시 개체를 관리하는 데 널리 사용되는 코드 집합입니다.써봤어요.검색 장치(모바일 또는 태블릿 제외)에 플래시가 설치되어 있으면 작동합니다.
다음으로 가장 일반적인 해결 방법은 클립보드로 바인딩된 텍스트를 입력 필드에 넣고 포커스를 해당 필드로 이동한 후 +를 눌러 텍스트를 복사하도록 사용자에게 알려주는 것입니다.
이 문제와 가능한 해결 방법에 대한 다른 논의는 다음과 같은 이전 스택 오버플로 게시물에서 확인할 수 있습니다.
플래시를 사용할 수 있는 현대적인 대안을 묻는 질문에는 많은 질문이 있었지만 솔루션에 대한 답변은 없었습니다(아마도 솔루션이 없기 때문일 것입니다).
Internet Explorer와 Firefox에는 클립보드에 액세스하기 위한 비표준 API가 있었지만 최신 버전에서는 보안상의 이유로 이러한 방법을 사용하지 않습니다.
가장 일반적인 클립보드 문제를 해결하기 위한 "안전한" 방법을 찾기 위한 초기 표준 노력(플래시 솔루션이 요구하는 것처럼 특정 사용자 작업이 필요할 수 있음)이 있으며, 최신 버전의 Firefox 및 Chrome에서 부분적으로 구현될 것으로 보이지만 아직 확인되지 않았습니다.
2023년 1월
2023년 기준으로 클립보드 API를 사용해야 합니다.
navigator.clipboard.writeText('text here you want to copy').then(function () {
alert('It worked! Do a CTRL - V to paste')
}, function () {
alert('Failure to copy. Check permissions for clipboard')
});
클립보드와의 상호 작용에 대한 자세한 내용은 다음과 같습니다.
2022년 6월
업데이트: 현재 올바른 방법은 클립보드 API를 사용하는 것입니다.
예:
// get the text from the DOM Element:
const textToCopy = document.querySelector('.content').innerText
// when someone clicks on the <a class="copy-text"> element
// (which should be a <button>), execute the copy command:
document.querySelector('.copy-text').addEventListener('click' , ()=> {
navigator.clipboard.writeText(textToCopy).then(
function() {
/* clipboard successfully set */
window.alert('Success! The text was copied to your clipboard')
},
function() {
/* clipboard write failed */
window.alert('Opps! Your browser does not support the Clipboard API')
}
)
})
바로 그겁니다.
클립보드 API가 도입되기 전에 솔루션을 살펴보려면 다음과 같이 하십시오(요즘에는 좋은 방법이 아닙니다).
$('button.copyButton').click(function(){
$(this).siblings('input.linkToCopy').select();
document.execCommand("copy");
});
HTML:
<button class="copyButton">click here to copy</button>
<input class="linkToCopy" value="TEXT TO COPY"
style="position: absolute; z-index: -999; opacity: 0;" />
clipboard.js는 플래시를 사용하지 않고 텍스트 또는 HTML 데이터를 클립보드에 복사할 수 있는 좋은 유틸리티입니다.사용하기 매우 쉽습니다. js를 포함하고 다음과 같은 것을 사용하십시오.
<button id='markup-copy'>Copy Button</button>
<script>
document.getElementById('markup-copy').addEventListener('click', function() {
clipboard.copy({
'text/plain': 'Markup text. Paste me into a rich text editor.',
'text/html': '<i>here</i> is some <b>rich text</b>'
}).then(
function(){console.log('success'); },
function(err){console.log('failure', err);
});
});
</script>
clipboard.js도 GitHub에 있습니다.
2016년 1월 15일 편집:상위 답변은 2015년 8월에 게시된 제 답변과 동일한 API를 참조하기 위해 오늘 편집되었습니다.이전 텍스트는 사용자에게 ZeroClipboard를 사용하도록 지시하는 것이었습니다.제가 jfriend00의 답변에서 이것을 끌어낸 것이 아니라 그 반대라는 것을 분명히 하고 싶습니다.
줄 바꿈 포함(알바로 몬토로의 답변 연장)
var ClipboardHelper = {
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};
ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());
플래시나 다른 요구사항이 없는 더 나은 접근 방식은 clipboard.js입니다.추가하기만 하면 됩니다.data-clipboard-target="#toCopyElement"하세요 의의서기화초에튼버임화,.new Clipboard('.btn');가 있 DOM인 합니다.toCopyElement클립보드로 이동합니다.링크를 통해 질문에 제공된 텍스트를 복사하는 스니펫입니다.
한 가지 제한 사항은 사파리에서는 작동하지 않지만 플래시를 사용하지 않기 때문에 모바일 브라우저를 포함한 다른 모든 브라우저에서 작동합니다.
$(function(){
new Clipboard('.copy-text');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<p id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="copy-text" data-clipboard-target="#content" href="#">copy Text</a><div class="form-group">
<label class="font-normal MyText">MyText to copy</label>
<button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>
$(".btnCopy").click(function () {
var element = $(this).attr("data");
copyToClipboard($('.' + element));
});
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
jQuery 간단한 솔루션.
사용자의 클릭에 의해 트리거되어야 합니다.
$("<textarea/>").appendTo("body").val(text).select().each(function () {
document.execCommand('copy');
}).remove();
이 코드를 사용하여 클립보드의 페이지에 있는 입력 값을 복사할 수 있습니다.
이것은 Html
<input type="text" value="xxx" id="link" class="span12" />
<button type="button" class="btn btn-info btn-sm" onclick="copyToClipboard('#link')">
Copy Input Value
</button>
그러면 이 html에 대해, 우리는 이 JQuery Code를 사용해야 합니다.
function copyToClipboard(element) {
$(element).select();
document.execCommand("copy");
}
이것이 이 질문에 대한 가장 간단한 해결책입니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/index.css" rel="stylesheet" />
<script src="js/jquery-2.1.4.min.js"></script>
<script>
function copy()
{
try
{
$('#txt').select();
document.execCommand('copy');
}
catch(e)
{
alert(e);
}
}
</script>
</head>
<body>
<h4 align="center">Copy your code</h4>
<textarea id="txt" style="width:100%;height:300px;"></textarea>
<br /><br /><br />
<div align="center"><span class="btn-md" onclick="copy();">copy</span></div>
</body>
</html>
입력필다없다것는이매중다요니합우음이드에▁does▁have다니▁it▁not합중요▁the▁important▁field▁input가 없다는 것은 매우 중요합니다.display: none브라우저가 텍스트를 선택하지 않으므로 복사되지 않습니다.사용하다opacity: 0문제를 해결하기 위해 0µs의 폭을 사용합니다.
<p style="color:wheat;font-size:55px;text-align:center;">How to copy a TEXT to Clipboard on a Button-Click</p>
<center>
<p id="p1">Hello, I'm TEXT 1</p>
<p id="p2">Hi, I'm the 2nd TEXT</p><br/>
<button onclick="copyToClipboard('#p1')">Copy TEXT 1</button>
<button onclick="copyToClipboard('#p2')">Copy TEXT 2</button>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script>
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>
내용을 복사하는 가장 간단한 방법입니다.
<div id="content"> Lorepm ispum </div>
<button class="copy" title="content">Copy Sorce</button>
function SelectContent(element) {
var doc = document
, text = doc.getElementById(element)
, range, selection
;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
document.execCommand('Copy');
}
$(".copy").click(function(){
SelectContent( $(this).attr('title'));
});
제안된 대부분의 답변은 임시 숨겨진 입력 요소를 추가로 만듭니다.요즘 대부분의 브라우저가 div 콘텐츠 편집을 지원하기 때문에 숨겨진 요소를 만들지 않고 텍스트 형식을 유지하며 순수 자바스크립트나 jQuery 라이브러리를 사용하는 솔루션을 제안합니다.
다음은 내가 생각할 수 있는 가장 적은 줄의 코드를 사용하는 미니멀리즘 스켈레톤 구현입니다.
//Pure javascript implementation:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
copyUsingPureJS(document.getElementById("copyTarget"));
alert("Text Copied to Clipboard Using Pure Javascript");
});
function copyUsingPureJS(element_id) {
element_id.setAttribute("contentEditable", true);
element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
element_id.focus();
document.execCommand("copy");
element_id.removeAttribute("contentEditable");
}
//Jquery:
$(document).ready(function() {
$("#copyUsingJquery").click(function() {
copyUsingJquery("#copyTarget");
});
function copyUsingJquery(element_id) {
$(element_id).attr("contenteditable", true)
.select()
.on("focus", function() {
document.execCommand('selectAll', false, null)
})
.focus()
document.execCommand("Copy");
$(element_id).removeAttr("contenteditable");
alert("Text Copied to Clipboard Using jQuery");
}
});#copyTarget {
width: 400px;
height: 400px;
border: 1px groove gray;
color: navy;
text-align: center;
box-shadow: 0 4px 8px 0 gray;
}
#copyTarget h1 {
color: blue;
}
#copyTarget h2 {
color: red;
}
#copyTarget h3 {
color: green;
}
#copyTarget h4 {
color: cyan;
}
#copyTarget h5 {
color: brown;
}
#copyTarget h6 {
color: teal;
}
#pasteTarget {
width: 400px;
height: 400px;
border: 1px inset skyblue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copyTarget">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<strong>Preserve <em>formatting</em></strong>
<br/>
</div>
<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>
<button id="copyUsingJquery">Copy Using jQuery</button>
<br><br> Paste Here to See Result
<div id="pasteTarget" contenteditable="true"></div>복사할 텍스트는 다음과 같은 텍스트 입력에 있습니다.<input type="text" id="copyText" name="copyText">그리고 위의 버튼을 클릭하면 텍스트가 클립보드에 복사되므로 버튼은 다음과 같습니다.<button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button>스크립트는 다음과 같아야 합니다.
<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "ZeroClipboard.swf"
});
});
</script>
CDN 파일의 경우
참고:ZeroClipboard.swf그리고.ZeroClipboard.js은 이 과 동일한 . 그렇지 않으면 우리가 포함하는 것처럼 포함해야 합니다.<script src=""></script>우리 페이지에
이 lib를 사용하면 복사 목표를 쉽게 실현할 수 있습니다!
텍스트를 클립보드에 복사하는 것은 어렵지 않습니다.구성하는 데 수십 단계가 필요하거나 로드하는 데 수백 KB가 필요하지 않습니다.그러나 무엇보다도 플래시나 비대해진 프레임워크에 의존해서는 안 됩니다.
그렇기 때문에 clipboard.js가 존재합니다.
또는
https://github.com/zeroclipboard/zeroclipboard
ZeroClipboard 라이브러리는 보이지 않는 Adobe Flash 동영상과 JavaScript 인터페이스를 사용하여 텍스트를 클립보드에 쉽게 복사할 수 있는 방법을 제공합니다.
클립보드-폴리필 라이브러리는 최신 Promise 기반 비동기 클립보드 API를 위한 폴리필입니다.
CLI에 설치:
npm install clipboard-polyfill
JS 파일에서 클립보드로 가져오기
window.clipboard = require('clipboard-polyfill');
함께 사용하고 있습니다.require("babel-polyfill");크롬 67에서 테스트했습니다.모두 생산에 좋습니다.
HTML 요소의 텍스트와는 별도로 개별 텍스트를 복사할 수 있습니다.
var copyToClipboard = function (text) {
var $txt = $('<textarea />');
$txt.val(text)
.css({ width: "1px", height: "1px" })
.appendTo('body');
$txt.select();
if (document.execCommand('copy')) {
$txt.remove();
}
};
html 코드 여기
<input id="result" style="width:300px"/>some example text
<button onclick="copyToClipboard('result')">Copy P1</button>
<input type="text" style="width:400px" placeholder="Paste here for test" />
JS 코드:
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
aux.setAttribute("value", document.getElementById(elementId).value);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($('span[id='+element+']').text()).select();
document.execCommand("copy");
$temp.remove();
}
쌍으로 구성된 클래스 "content - copy button"에 대해 인라인 클릭 없이 순수 JS.요소가 많으면 더 편할 것 같습니다.)
(function(){
/* Creating textarea only once, but not each time */
let area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";
let content = document.querySelectorAll('.js-content');
let copy = document.querySelectorAll('.js-copy');
for( let i = 0; i < copy.length; i++ ){
copy[i].addEventListener('click', function(){
area.style.display = "block";
/* because the classes are paired, we can use the [i] index from the clicked button,
to get the required text block */
area.value = content[i].innerText;
area.select();
document.execCommand('copy');
area.style.display = "none";
/* decorative part */
this.innerHTML = 'Cop<span style="color: red;">ied</span>';
/* arrow function doesn't modify 'this', here it's still the clicked button */
setTimeout( () => this.innerHTML = "Copy", 2000 );
});
}
})();hr { margin: 15px 0; border: none; }<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>이전 브라우저 지원:
(function(){
var area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";
var content = document.querySelectorAll('.js-content');
var copy = document.querySelectorAll('.js-copy');
for( var i = 0; i < copy.length; i++ ){
copyOnClick(i);
}
function copyOnClick(i){
copy[i].addEventListener('click', function(){
area.style.display = "block";
area.value = content[i].innerText;
area.select();
document.execCommand('copy');
area.style.display = "none";
var t = this;
t.innerHTML = 'Cop<span style="color: red;">ied</span>';
setTimeout( function(){
t.innerHTML = "Copy"
}, 2000 );
});
}
})();hr { margin: 15px 0; border: none; }<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>방금 하고 있었는데 제 것보다 더 좋은 방법이 있는지 알고 싶었을 뿐인데, 아닙니다.
제 코드를 사용하면 텍스트를 복사하고 도구 설명을 표시할 수 있습니다.
머리
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.2.0/fonts/remixicon.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
몸
<div class="alert alert-primary alert-dismissible mb-0 py-1" role="alert" id="liveAlert">
<div class="container d-flex justify-content-between">
<button type="button" class=" btn align-self-center ms-4 copytext" data-bs-toggle="tooltip" data-bs-placement="top" title=""><strong>Good news!</strong> You just got 10% off, use your coupon <span class="fw-bold bg-secondary text-white px-2 maintext">store10off</span>. <i class="ri-file-copy-line"></i></button>
<button type="button" class="btn align-self-center" data-bs-dismiss="alert" aria-label="Close"><strong class="fw-bold fs-4"><i class="ri-close-fill"></i></strong></button>
</div>
</div>
기능.
<script>
$('.copytext').click(function(){
var thistooltip = $(this);
var thistext = $(this).children('.maintext').text();
navigator.clipboard.writeText(thistext);
$(this).attr('title','copied');
setTimeout(function(){$(thistooltip).tooltip("toggle");}, 800);
});
</script>
아주 간단합니다.당신은 js를 검색하고 있는 것이 틀림없습니다.navigator.clipboard.writeText("thistext");
이렇게 하면 "이 텍스트"가 복사됩니다.이제 클릭 시 jquery on click 기능을 사용하여 값(복사할 텍스트)을 문자열에 저장하고(필요한 경우 DOM도 사용하여 페이지에서 값을 가져올 수 있습니다), 이 복사 줄을 사용하여 "이 텍스트" 대신 변수를 전달하십시오!
document.getElementById('markup-copy').addEventListener('click', function() {
var txt = "Your text Here";
$("<textarea/>").appendTo("body").val(txt).select().each(function () {
document.execCommand('copy');
}).remove();
});
다음은 여러 답변의 조합입니다.이렇게 하면 새 줄이 올바르게 보존됩니다.
// Copies a value to the clipboard
window.copyToClipboard = function(value) {
// navigator clipboard api needs a secure context (https)
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard api method
return navigator.clipboard.writeText(value).then(function () {
//alert('It worked! Do a CTRL - V to paste')
}, function () {
alert('Error while copying to clipboard.')
});
} else {
// text area method
let textArea = document.createElement("textarea");
textArea.value = value;
// make the textarea out of viewport
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
document.execCommand('copy');
textArea.remove();
}
}
일반 JS + 호환성 향상
function copyToClipboard(e) {
selectText(e);
document.execCommand("copy");
}
function selectText(e) {
e = document.getElementById(e);
if (document.body.createTextRange) {
const r = document.body.createTextRange();
r.moveToElementText(e);
r.select();
} else if (window.getSelection) {
const s = window.getSelection();
const r = document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
} else {
console.warn("Could not select text in "+e+": Unsupported browser.");
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<span style="border: 1px dotted gray;padding:10px 5px">
<strong style="font-size: 25px; margin-right: 10px" id="clipboard-text">С2Н5ОН</strong>
<button onclick="copyToClipboard('clipboard-text')"><i class="fa fa-clipboard"></i></button>
</span>
<p><input placeholder="paste me here" value="" type="text"><p>HTML:
// you need bootstrap(js && css) and JQuery(js)
<span class="text-copy" value="your-text">text</span>
CSS:
.text-copy {
cursor: pointer;
color: #0d6efd;
text-decoration: underline;
}
.text-copy:hover {
color: #1b6be4;
}
JS(JQuery 사용):
$(document).ready(function() {
var elements = $('.copy-text');
for(let i = 0; i < elements.length; i++) {
const element = $(elements[i]);
element.attr('data-toggle', 'tooltip')
.attr('data-placement', 'top')
.attr('title', `Tab to copy "${element.attr('value')}"`);
}
$('[data-toggle="tooltip"]').tooltip();
$('.text-copy').click(function() {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(this).attr('value')).select();
document.execCommand("copy");
$temp.remove();
});
});
$(document).ready(async function() {
var elements = $('.text-copy');
for(let i = 0; i<elements.length; i++) {
const element = $(elements[i]);
element.attr('data-toggle', 'tooltip')
.attr('data-placement', 'top')
.attr('title', `Tab to copy "${element.attr('value')}"`);
}
$('[data-toggle="tooltip"]').tooltip();
$('.text-copy').click(function() {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(this).attr('value')).select();
document.execCommand("copy");
$temp.remove();
});
});body {
display: grid;
justify-content: center;
}
.text-copy {
cursor: pointer;
color: #0d6efd;
text-decoration: underline;
}
.text-copy:hover {
color: #1b6be4;
}<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h2 class="text-copy" value="your copy text">your text</h2>
<br>
<h4>paste here</h4>
<input type="text">
</body>
</html>그냥 이 코드를 사용하는 게 어때요, 이해가 안 가요?
navigator.clipboard.writeText('text here...');
여기 우아한 자바스크립트 솔루션이 있습니다.
<input type="text" value="Foo Bar" id="your_input">
<button onclick="copy()">Copy text</button>
<script type="application/javascript">
function copy() {
var copiedtext = document.getElementById("your_input");
copiedtext.select();
copiedtext.setSelectionRange(0, 99999); //for mobile devices
navigator.clipboard.writeText(copiedtext.value);
alert("You just copied " + copiedtext.value);
}
</script>
언급URL : https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard
'programing' 카테고리의 다른 글
| NSLayoutConstraint의 승수 속성을 변경할 수 있습니까? (0) | 2023.05.26 |
|---|---|
| 하위 프로세스.call()에서 파일을 찾을 수 없습니다. (0) | 2023.05.26 |
| 연결 문자열이 올바른 동안 'vmx failure' 오류가 발생했습니다. (0) | 2023.05.26 |
| 특정 Git 태그를 복제하는 방법 (0) | 2023.05.26 |
| Node.js의 Connect, Express 및 "middleware"란 무엇입니까? (0) | 2023.05.21 |