Copy text from an input or a div in the paper holder, saving the HTML tags

Question

Copy text from an input or a div in the paper holder, saving the HTML tags

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

Some time ago I could copy text from an input text or a div in the clipboard, also saving its HTML format. That is, I could copy the text with the HTML tags I had such as p , strong , em , h1 ... etc.

For this I used the library Zeroclipboard and everything worked great.

I used the code as explained by Zeroclipboard in Github , although introducing the content in an input text:

HTML

<html>
  <body>
    <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
    <script src="ZeroClipboard.js"></script>
    <script src="main.js"></script>
  </body>
</html>

main.js

// main.js
var client = new ZeroClipboard( document.getElementById("copy-button") );

client.on( "ready", function( readyEvent ) {
  // alert( "ZeroClipboard SWF is ready!" );

  client.on( "aftercopy", function( event ) {
    // 'this' === 'client'
    // 'event.target' === the element that was clicked
    event.target.style.display = "none";
    alert("Copied text to clipboard: " + event.data["text/plain"] );
  } );
} );

The fact is that now I can not make it work in any way. I have uploaded in the HTML folder the files ZeroClipboard.swf , ZeroClipboard.js , main.js ...

I want to make it work in Safari and my operating system is Mac OSX Sierra . I do not know if the non-functioning of Safari or due to the fact that I upgraded Sierra, because the previous code worked in another version of the Operating System.

Does anyone have this library running in Safari?

Or, could you recommend another alternative library?

Or, is it possible to do this with Javascript / jQuery without going through a library?

EDIT

It would be to have text like this in a div or a input :

<div id="content">
<p>Este es un párrafo</p>
<p>Este es otro con letras en <em>cursiva</em>, en <strong>negritas</strong>
<br />Y además como saltos de línea</p>
</div>

And that when I click on the Copiar button I copy the same content, including their respective HTML tags. Or ... more advanced still, although that could do it (I think) ... that when filling div or input with content, I also copy it to the clipboard.

The @Carmen response, below, executes the copy action, but gets the text without the HTML tags. I need the full text to enter it in a database.

javascript html

asked by A. Cedano 14.06.2017 в 13:48

source

2 answers

1

I give you a link that I think can solve your question well.

link

Copied from @EldoNewAge's response

function CopyToClipboard(containerid) {
if (document.selection) { 
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("Copy"); 

} else if (window.getSelection) {
    var range = document.createRange();
     range.selectNode(document.getElementById(containerid));
     window.getSelection().addRange(range);
     document.execCommand("Copy");
     alert("text copied") 
}}

answered by 14.06.2017 в 14:25

How to get all the jobs in separate scripts sql server ssis? List index out of range

score 1 · Accepted Answer

If you need to copy the content HTML of an element or the value of a input , you can do the following:

Create a textarea . (1)
Save the text to copy in it. (2)
Select the content of it. (3)
Copy the selected text. (4)

So for example:

function copyToCliboard(txt) {
  if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
    // Ref 1
    var textarea = document.createElement("textarea");
    // Ref 2
    textarea.textContent = txt;
    // Evita scroll al elemento en Edge
    textarea.style.position = "fixed";
    document.body.appendChild(textarea);
    // Ref 3
    textarea.select();
    // Algunos navegadores pueden lanzar una excepción de seguridad
    try {
        // Ref 4
        return document.execCommand("copy");
    } catch (ex) {
        console.warn("Copy to clipboard failed.", ex);
        return false;
    } finally {
        document.body.removeChild(textarea);
    }
  }
}

//
document.getElementById('copy').addEventListener('click', function() {
  copyToCliboard(document.getElementById('content').innerHTML);
});

<div id="content">
<p>Este es un párrafo</p>
<p>Este es otro con letras en <em>cursiva</em>, en <strong>negritas</strong>
<br />Y además como saltos de línea</p>
</div>
<button type="button" id="copy">Copiar</button>