Bir div içindeki metni panoya nasıl kopyalarım? Bir div'im var ve metni panoya ekleyecek bir bağlantı eklemem gerekiyor. Bunun için bir çözüm var mı?
<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>
Metni kopyala'ya tıkladıktan sonra Ctrl + V tuşlarına bastığımda yapıştırılması gerekiyor.
Flash olmayan başka bir yol daha vardır (jfriend00'ın cevabında bahsedilen Clipboard API dışında). Metni seçmeniz ve ardından sayfada o anda seçili olan metni panoya kopyalamak için copy
]3 komutunu çalıştırmanız gerekir.
Örneğin, bu fonksiyon iletilen öğenin içeriğini panoya kopyalayacaktır (PointZeroTwo yorumlarındaki öneriyle güncellenmiştir):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
İşte böyle çalışıyor:
document.execCommand("copy")
.Burada hızlı bir demo görebilirsiniz:
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" />
Asıl sorun, şu anda tüm tarayıcıların bu özelliği desteklememesidir, ancak ana tarayıcılarda kullanabilirsiniz:
Güncelleme 1: Bu, saf bir JavaScript çözümü (jQuery olmadan) ile de gerçekleştirilebilir:
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" />
Şimdi id'yi # olmadan ilettiğimize dikkat edin.
madzohan]6'ın aşağıdaki yorumlarda bildirdiği gibi, bazı durumlarda Google Chrome'un 64 bit sürümüyle ilgili garip bir sorun var (dosyayı yerel olarak çalıştırmak). Bu sorun yukarıdaki jQuery olmayan çözümle giderilmiş gibi görünüyor.
Madzohan Safari'de denedi ve çözüm işe yaradı ancak .select()
yerine document.execCommand('SelectAll')
kullanıldı (sohbette ve aşağıdaki yorumlarda belirtildiği gibi).
PointZeroTwo'nun yorumlarda belirttiği gibi]4, kod bir başarı/başarısızlık sonucu döndürecek şekilde geliştirilebilir. Bu jsFiddle][7] üzerinde bir demo görebilirsiniz.
StackOverflow'un İspanyolca sürümünde bir kullanıcının belirttiği gibi]8, bir öğenin içeriğini tam anlamıyla kopyalamak istiyorsanız yukarıda listelenen çözümler mükemmel çalışır, ancak kopyalanan metni formatla yapıştırmak istiyorsanız o kadar iyi çalışmazlar (bir input type="text"
içine kopyalandığından, format "kaybolur").
Bunun için bir çözüm, içeriği düzenlenebilir bir div
içine kopyalamak ve ardından benzer bir şekilde execCommand
kullanarak kopyalamak olabilir. Burada bir örnek var - kopyala düğmesine tıklayın ve ardından aşağıdaki düzenlenebilir içerik kutusuna yapıştırın:
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>
Ve jQuery'de bu şekilde olacaktır:
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 itibariyle düzenlenmiştir
2016 itibariyle, artık çoğu tarayıcıda metni panoya kopyalayabilirsiniz çünkü çoğu tarayıcı, bir seçimden çalışan document.execCommand("copy")
kullanarak bir metin seçimini panoya programlı olarak kopyalama yeteneğine sahiptir.
Tarayıcıdaki diğer bazı eylemlerde olduğu gibi (yeni bir pencere açmak gibi), panoya kopyalama yalnızca belirli bir kullanıcı eylemiyle (fare tıklaması gibi) yapılabilir. Örneğin, bir zamanlayıcı aracılığıyla yapılamaz.
İşte bir kod örneği:
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">
İşte biraz daha gelişmiş bir demo:
Ayrıca, clipboard.js ile bunu sizin için yapan önceden oluşturulmuş bir kütüphane de edinebilirsiniz.
Cevabın eski, tarihi kısmı
JavaScript aracılığıyla doğrudan panoya kopyalamaya güvenlik nedeniyle hiçbir modern tarayıcı tarafından izin verilmez. En yaygın geçici çözüm, panoya kopyalama için yalnızca doğrudan bir kullanıcı tıklamasıyla tetiklenebilen bir Flash özelliği kullanmaktır.
Daha önce de belirtildiği gibi, ZeroClipboard kopyalama yapmak için Flash nesnesini yönetmeye yönelik popüler bir kod kümesidir. Ben bunu kullandım. Tarama cihazında Flash yüklüyse (mobil veya tableti dışlayan), çalışıyor.
Bir sonraki en yaygın çözüm, panoya bağlı metni bir giriş alanına yerleştirmek, odağı bu alana taşımak ve kullanıcıya metni kopyalamak için Ctrl + C tuşlarına basmasını tavsiye etmektir.
Sorunla ilgili diğer tartışmalar ve olası geçici çözümler bu önceki Stack Overflow gönderilerinde bulunabilir:
https://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascript
https://stackoverflow.com/questions/1539641/how-to-copy-text-to-the-clients-clipboard-using-jquery
Flash kullanımına modern bir alternatif arayan bu sorular çok sayıda olumlu oy aldı ve çözüm içeren hiçbir yanıt alamadı (muhtemelen hiçbiri olmadığı için):
Internet Explorer ve Firefox, panoya erişmek için standart olmayan API'lere sahipti, ancak daha modern sürümleri bu yöntemleri kullanımdan kaldırdı (muhtemelen güvenlik nedenleriyle).
En yaygın pano sorunlarını çözmek için (muhtemelen Flash çözümünün gerektirdiği gibi belirli bir kullanıcı eylemi gerektiren) "güvenli" bir yol bulmaya çalışan yeni ortaya çıkan standartlar çabası var ve Firefox ve Chrome'un en son sürümlerinde kısmen uygulanmış gibi görünüyor, ancak bunu henüz doğrulamadım.
Kopyalanacak metin metin girişindedir, örneğin: <input type="text" id="copyText" name="copyText">
ve yukarıdaki düğmeye tıklandığında metin panoya kopyalanmalıdır, bu nedenle düğme aşağıdaki gibidir:<button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button>
Scriptiniz şöyle olmalıdır:
<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "ZeroClipboard.swf"
});
});
</script>
CDN dosyaları için
Not: ZeroClipboard.swf
ve ZeroClipboard.js
" dosyası, bu işlevi kullanan dosyanızla aynı klasörde olmalıdır VEYA sayfalarımıza <script src=""></script>
eklediğimiz gibi eklemelisiniz.