1. 首頁
  2. 問答
  3. 從克隆的textarea複製到剪貼板

從克隆的textarea複製到剪貼板

2015-04-23 71 views
0

我在這裏發現了一些代碼，這正是我現在正在使用的工具所需要的;將以前的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

回答

0

我能夠通過固定讓您的代碼在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

+0

感謝您的快速回復@JKirkbride。雖然沒有解決它.. 編輯我的文章，並添加詳細信息： 我需要它像我剛剛添加下面的第一個代碼工作。我遇到的問題是它不會將克隆的textarea的值複製到剪貼板。 – Vits

+0

啊。謝謝，現在有點清楚了。我注意到克隆文本不會複製的行爲，因爲沒有爲克隆創建標記元素。我會盡快進行調查。 – JKirkbride

+0

http://www.w3schools.com/js/js_htmldom_nodes.asp可能是一種動態添加html UI並在其中放置文本的可能性。這不是最好的解決方案，也不是100％符合你已經編寫的代碼，但這是一種可能性，我會繼續尋找更符合你的代碼的方式。 – JKirkbride

相關問題

 相關問題