[英]Copy to clipboard from a cloned textarea
我发现这里发布了一些代码,这些正是我现在正在使用的工具所需要的; 可以将以前的textarea的值复制到剪贴板,但对于克隆的textarea似乎无效。 需要一些帮助。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<center>
<button id="button" onlick="duplicate()">Duplicate</button>
</center>
<div id="duplicater">
<center>
DUPLICATE EVERYTHING INSIDE THIS DIV
<br>
<textarea id="notestocopy" name="notestocopy" rows="20" cols="20%" style="bordercolor: #027991;"></textarea>
<button type="button" id="copy" class="btn-copy">Copy</button>
<span class="span-message"></span>
<br>
</center>
</div>
<script type='text/javascript'>//<![CDATA[
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('duplicater');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicetor" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
//]]>
</script>
<script type="text/javascript">
// Function for initializing ZeroClipboard
function zcInit() {
var client = new ZeroClipboard($('.btn-copy'));
client.on('ready', function(event) {
client.on('copy', function(event) {
// `this` === `client`
// `event.target` === the element that was clicked
// Get the text content of <input> or <textarea> that comes immediately before the clicked button
var $prevEle = $(event.target).prev();
var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();
// If value of `text` is not empty, set the data to clipboard
if (text) {
event.clipboardData.setData('text/plain', text);
}
});
client.on('aftercopy', function(event) {
// Check if copied text is not empty
if (event.data["text/plain"]) {
// Call something on successful copying
$(event.target).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
}
});
});
client.on('error', function(event) {
ZeroClipboard.destroy();
});
}
// Function for copying text using window.clipboardData
function addHandler_WinClipData() {
$('.btn-copy').click(function() {
var $prevEle = $(this).prev();
var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();
// If value of `text` is not empty, set the data to clipboard
if (text && window.clipboardData.setData('Text', text)) {
// Call something on successful copying
$(this).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
}
});
}
// Function for pop up a message and select text in <input> or <textarea>, in case window.Clipboard data and Flash are not available
function addHandler_AlertMsg() {
$('.btn-copy').click(function() {
if ($(this).prev().val()) {
alert('No Flash installed. Please copy manually');
$(this).prev().focus().select();
}
});
}
// Function for checking Flash availability
function detectFlash() {
var hasFlash = false;
try {
var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (fo) {
hasFlash = true;
}
} catch (e) {
if (navigator.mimeTypes && navigator.mimeTypes['application/x-shockwave-flash'] !== undefined &&
navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
hasFlash = true;
}
}
return hasFlash;
}
var hasWinClipData = !!(window.clipboardData && clipboardData.setData),
hasFlash = detectFlash();
if (hasWinClipData) { // Check if window.clipboardData is available
addHandler_WinClipData();
} else if (hasFlash) { // Check if Flash is available
$.ajax({
type: "GET",
url: '//cdn.jsdelivr.net/zeroclipboard/2.1.6/ZeroClipboard.min.js',
dataType: "script",
cache: true,
success: zcInit,
error: addHandler_AlertMsg
});
} else { // In case window.clipboardData and Flash are not available, bind a "click" event handler to the "copy buttons" to pop up a message when clicked
addHandler_AlertMsg();
}
</script>
</body>
</html>
我有什么想让它像这样工作的东西吗?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div>
<center>
<br>
<textarea id="notestocopy" name="notestocopy" rows="20" cols="20%" style="bordercolor: #027991;"></textarea>
<button type="button" id="copy" class="btn-copy">Copy</button>
<span class="span-message"></span>
<br>
<textarea id="notestocopy" name="notestocopy" rows="20" cols="20%" style="bordercolor: #027991;"></textarea>
<button type="button" id="copy" class="btn-copy">Copy</button>
<span class="span-message"></span>
</center>
</div>
<script type="text/javascript">
// Function for initializing ZeroClipboard
function zcInit() {
var client = new ZeroClipboard($('.btn-copy'));
client.on('ready', function(event) {
client.on('copy', function(event) {
// `this` === `client`
// `event.target` === the element that was clicked
// Get the text content of <input> or <textarea> that comes immediately before the clicked button
var $prevEle = $(event.target).prev();
var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();
// If value of `text` is not empty, set the data to clipboard
if (text) {
event.clipboardData.setData('text/plain', text);
}
});
client.on('aftercopy', function(event) {
// Check if copied text is not empty
if (event.data["text/plain"]) {
// Call something on successful copying
$(event.target).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
}
});
});
client.on('error', function(event) {
ZeroClipboard.destroy();
});
}
// Function for copying text using window.clipboardData
function addHandler_WinClipData() {
$('.btn-copy').click(function() {
var $prevEle = $(this).prev();
var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();
// If value of `text` is not empty, set the data to clipboard
if (text && window.clipboardData.setData('Text', text)) {
// Call something on successful copying
$(this).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
}
});
}
// Function for pop up a message and select text in <input> or <textarea>, in case window.Clipboard data and Flash are not available
function addHandler_AlertMsg() {
$('.btn-copy').click(function() {
if ($(this).prev().val()) {
alert('No Flash installed. Please copy manually');
$(this).prev().focus().select();
}
});
}
// Function for checking Flash availability
function detectFlash() {
var hasFlash = false;
try {
var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (fo) {
hasFlash = true;
}
} catch (e) {
if (navigator.mimeTypes && navigator.mimeTypes['application/x-shockwave-flash'] !== undefined &&
navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
hasFlash = true;
}
}
return hasFlash;
}
var hasWinClipData = !!(window.clipboardData && clipboardData.setData),
hasFlash = detectFlash();
if (hasWinClipData) { // Check if window.clipboardData is available
addHandler_WinClipData();
} else if (hasFlash) { // Check if Flash is available
$.ajax({
type: "GET",
url: '//cdn.jsdelivr.net/zeroclipboard/2.1.6/ZeroClipboard.min.js',
dataType: "script",
cache: true,
success: zcInit,
error: addHandler_AlertMsg
});
} else { // In case window.clipboardData and Flash are not available, bind a "click" event handler to the "copy buttons" to pop up a message when clicked
addHandler_AlertMsg();
}
</script>
</body>
</html>
编辑:我尝试了分别克隆对象并手动设置按钮的类,但是它仍然无法正常工作。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div>
<center>
<input type="button" id="add" value="Add" onclick="add()";/>
<br>
<textarea id="notestocopy" name="notestocopy" rows="20" cols="20%" style="bordercolor: #027991;"></textarea>
<button type="button" id="copy" class="btn-copy">Copy</button>
<span class="span-message"></span>
</center>
</div>
<div id="container" align="center">
</div>
<script type="text/javascript">
function add(){
var notestocopyadd = $("#notestocopy").clone();
var copyadd = $("#copy").clone();
copyadd.attr("class", "btn-copy");
$("#container").append(notestocopyadd);
$("#container").append(copyadd);
$("#container").append("<br/>");
}
</script>
<script type="text/javascript">
// Function for initializing ZeroClipboard
function zcInit() {
var client = new ZeroClipboard($('.btn-copy'));
client.on('ready', function(event) {
client.on('copy', function(event) {
// `this` === `client`
// `event.target` === the element that was clicked
// Get the text content of <input> or <textarea> that comes immediately before the clicked button
var $prevEle = $(event.target).prev();
var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();
// If value of `text` is not empty, set the data to clipboard
if (text) {
event.clipboardData.setData('text/plain', text);
}
});
client.on('aftercopy', function(event) {
// Check if copied text is not empty
if (event.data["text/plain"]) {
// Call something on successful copying
$(event.target).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
}
});
});
client.on('error', function(event) {
ZeroClipboard.destroy();
});
}
// Function for copying text using window.clipboardData
function addHandler_WinClipData() {
$('.btn-copy').click(function() {
var $prevEle = $(this).prev();
var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();
// If value of `text` is not empty, set the data to clipboard
if (text && window.clipboardData.setData('Text', text)) {
// Call something on successful copying
$(this).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
}
});
}
// Function for pop up a message and select text in <input> or <textarea>, in case window.Clipboard data and Flash are not available
function addHandler_AlertMsg() {
$('.btn-copy').click(function() {
if ($(this).prev().val()) {
alert('No Flash installed. Please copy manually');
$(this).prev().focus().select();
}
});
}
// Function for checking Flash availability
function detectFlash() {
var hasFlash = false;
try {
var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (fo) {
hasFlash = true;
}
} catch (e) {
if (navigator.mimeTypes && navigator.mimeTypes['application/x-shockwave-flash'] !== undefined &&
navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
hasFlash = true;
}
}
return hasFlash;
}
var hasWinClipData = !!(window.clipboardData && clipboardData.setData),
hasFlash = detectFlash();
if (hasWinClipData) { // Check if window.clipboardData is available
addHandler_WinClipData();
} else if (hasFlash) { // Check if Flash is available
$.ajax({
type: "GET",
url: '//cdn.jsdelivr.net/zeroclipboard/2.1.6/ZeroClipboard.min.js',
dataType: "script",
cache: true,
success: zcInit,
error: addHandler_AlertMsg
});
} else { // In case window.clipboardData and Flash are not available, bind a "click" event handler to the "copy buttons" to pop up a message when clicked
addHandler_AlertMsg();
}
</script>
</body>
</html>
通过修复您编写的拼写错误,我能够使您的代码在IE中工作
function duplicate() { var clone = original.cloneNode(true); // "deep" clone clone.id = "duplicetor" + ++i; // there can only be one element with an ID original.parentNode.appendChild(clone); }
将“ duplicetor”修复为复制器,即ID的名称。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.