0
function click(){
var input = document.getElementById('div');
input.focus();
document.execCommand('selectAll');
document.execCommand('copy');
}

The function is executed when clicking on a button:

<button onClick="click();">copy</button>

Also, I want to copy only the table inside the div element with one click but this copies the whole document when clicked twice.

10
  • Be aware that .execCommand isn't supported in Safari. Aug 12, 2015 at 10:57
  • 1
    How do you attach the click function to a button?
    – putvande
    Aug 12, 2015 at 11:01
  • To add to @evolutionxbox here is MDN's support matrix on the execCommand method: developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
    – scunliffe
    Aug 12, 2015 at 11:02
  • By <button onClick="click();">copy</button>
    – Mani
    Aug 12, 2015 at 11:03
  • Key wording in the MDN doc linked above: "When an HTML document has been switched to designMode, the document object exposes the execCommand method" - (it might be worth seeing if this needs to be triggered first)
    – scunliffe
    Aug 12, 2015 at 11:04

2 Answers 2

0

At first, you can't rely on users' browser will support clipboard actions, hence you might want to offer an alternative way to copy the table.

In your code, click as a global function's name overrides the native window.click method, and should not be used. This is probably the reason why you have to click the button twice (or there's something in your code which you haven't posted).

Focus can be gained only to form elements and editable elements, or elements with tabindex attribute. In your case input.focus() has no effect, hence the whole document is selected.

Here's a click handler which does what you want, though it's not very generic. It clones the first table found from #div and appends it to a hidden and editable div, where it can be selected and copied using execCommands.

function copyTable () {
    var content = document.getElementById('div').getElementsByTagName('table')[0], // Get the element to copy
        copyPad = document.getElementById('copypad'),
        clone = content.cloneNode(true); // Clone the element to copy
    copyPad.appendChild(clone); // Add  the clone to an editable element
    copyPad.style.display = 'block'; // Some browsers refuse to select hidden content, hence show the div temporarily
    copyPad.focus(); // You can gain focus to an editable element
    try { // Not good, but tackles issues, if Security blocks the copy, or execCommand is not supported
        document.execCommand('selectAll'); // Now selects the content of the focused element only
        document.execCommand('copy');
    } catch (err) {
        // Security options of this browser blocks copy
        // or the API is not supported
        // Provide an alternative way to copy the table
    }
    copyPad.innerHTML = ''; // Clear the copyPad
    copyPad.style.display = ''; // Prevent the editable to be shown
    return;
}

Then we need some CSS and HTML:

#copypad {
    display: none;
}
<div id="div">
    <table>
       :
    </table>
</div>
<div id="copypad" contenteditable="true"></div>

A working demo at jsFiddle.

Notice also, that the content of the clipboard might vary depending on a used browser.

An alternative way would be for example to prompt user to select and copy the table, or you can read the content and show it in a textarea for copying.

0

This will work for you :) JSFIDDLE Link

Html

<div id="divelm" contentEditable="true" style="width:200px;height:200px;border:1px solid #ccc"></div>

Javascript

function SelectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    
    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);

    }
}

var elm = document.getElementById('divelm');
elm.onclick = function(){

   SelectText('divelm');
   document.execCommand('copy');



}
1
  • " I want to copy only the table inside the div element". Also I doubt OP wants a contenteditable div.
    – Teemu
    Aug 12, 2015 at 12:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.