从克隆的textarea复制到剪贴板

我在这里发现了一些代码，这正是我现在正在使用的工具所需要的;将以前的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>

来源

2015-04-23 Vits

我能够通过固定让您的代码在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的名称的拼写错误。

来源

2015-04-23 00:33:59 JKirkbride

感谢您的快速回复@JKirkbride。虽然没有解决它.. 编辑我的文章，并添加详细信息：我需要它像我刚刚添加下面的第一个代码工作。我遇到的问题是它不会将克隆的textarea的值复制到剪贴板。 – Vits

啊。谢谢，现在有点清楚了。我注意到克隆文本不会复制的行为，因为没有为克隆创建标记元素。我会尽快进行调查。 – JKirkbride

http://www.w3schools.com/js/js_htmldom_nodes.asp可能是一种动态添加html UI并在其中放置文本的可能性。这不是最好的解决方案，也不是100％符合你已经编写的代码，但这是一种可能性，我会继续寻找更符合你的代码的方式。 – JKirkbride

从克隆的textarea复制到剪贴板

回答

相关问题