javascript - Copy to clipboard from a cloned textarea -
i found codes posted here that's need tool i'm working on right now; copy previous textarea's value clipboard, doesn't seem work cloned textarea. need help.
<!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 inside 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 = 0; var original = document.getelementbyid('duplicater'); function duplicate() { var clone = original.clonenode(true); // "deep" clone clone.id = "duplicetor" + ++i; // there can 1 element id original.parentnode.appendchild(clone); } //]]> </script> <script type="text/javascript"> // function initializing zeroclipboard function zcinit() { var client = new zeroclipboard($('.btn-copy')); client.on('ready', function(event) { client.on('copy', function(event) { // `this` === `client` // `event.target` === element clicked // text content of <input> or <textarea> comes before 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` not empty, set data clipboard if (text) { event.clipboarddata.setdata('text/plain', text); } }); client.on('aftercopy', function(event) { // check if copied text not empty if (event.data["text/plain"]) { // call on successful copying $(event.target).next().stop().css('opacity', 1).text('copied!').fadein(30).fadeout(1000); } }); }); client.on('error', function(event) { zeroclipboard.destroy(); }); } // function 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` not empty, set data clipboard if (text && window.clipboarddata.setdata('text', text)) { // call on successful copying $(this).next().stop().css('opacity', 1).text('copied!').fadein(30).fadeout(1000); } }); } // function pop message , select text in <input> or <textarea>, in case window.clipboard data , flash 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 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 available addhandler_winclipdata(); } else if (hasflash) { // check if flash 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 , flash not available, bind "click" event handler "copy buttons" pop message when clicked addhandler_alertmsg(); } </script> </body> </html> is there missed work this?
<!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 initializing zeroclipboard function zcinit() { var client = new zeroclipboard($('.btn-copy')); client.on('ready', function(event) { client.on('copy', function(event) { // `this` === `client` // `event.target` === element clicked // text content of <input> or <textarea> comes before 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` not empty, set data clipboard if (text) { event.clipboarddata.setdata('text/plain', text); } }); client.on('aftercopy', function(event) { // check if copied text not empty if (event.data["text/plain"]) { // call on successful copying $(event.target).next().stop().css('opacity', 1).text('copied!').fadein(30).fadeout(1000); } }); }); client.on('error', function(event) { zeroclipboard.destroy(); }); } // function 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` not empty, set data clipboard if (text && window.clipboarddata.setdata('text', text)) { // call on successful copying $(this).next().stop().css('opacity', 1).text('copied!').fadein(30).fadeout(1000); } }); } // function pop message , select text in <input> or <textarea>, in case window.clipboard data , flash 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 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 available addhandler_winclipdata(); } else if (hasflash) { // check if flash 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 , flash not available, bind "click" event handler "copy buttons" pop message when clicked addhandler_alertmsg(); } </script> </body> </html> edit: tried cloning objects individually , manually setting class button it's still not working..
<!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 initializing zeroclipboard function zcinit() { var client = new zeroclipboard($('.btn-copy')); client.on('ready', function(event) { client.on('copy', function(event) { // `this` === `client` // `event.target` === element clicked // text content of <input> or <textarea> comes before 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` not empty, set data clipboard if (text) { event.clipboarddata.setdata('text/plain', text); } }); client.on('aftercopy', function(event) { // check if copied text not empty if (event.data["text/plain"]) { // call on successful copying $(event.target).next().stop().css('opacity', 1).text('copied!').fadein(30).fadeout(1000); } }); }); client.on('error', function(event) { zeroclipboard.destroy(); }); } // function 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` not empty, set data clipboard if (text && window.clipboarddata.setdata('text', text)) { // call on successful copying $(this).next().stop().css('opacity', 1).text('copied!').fadein(30).fadeout(1000); } }); } // function pop message , select text in <input> or <textarea>, in case window.clipboard data , flash 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 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 available addhandler_winclipdata(); } else if (hasflash) { // check if flash 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 , flash not available, bind "click" event handler "copy buttons" pop message when clicked addhandler_alertmsg(); } </script> </body> </html>
i able code working in ie fixing typo wrote
function duplicate() { var clone = original.clonenode(true); // "deep" clone clone.id = "duplicetor" + ++i; // there can 1 element id original.parentnode.appendchild(clone); }
fixing "duplicetor" duplicator, name of id.