javascript副本與execCommand

Question

我想從html元素中複製一些內容的數據集。

HTML代碼

<p id="web-password-@{{ id }}" data-password="@{{ password }}" 
data-state="0">@{{ hidePassword }}</p> 

<button class="mdl-button mdl-js-button mdl-button--icon"> 

    <i data-event="copy" data-obj="util" data-target="web-password-@{{ id }}" 
    class="material-icons clickable-icon">content_copy</i> 

</button> 

複製方法

的方法beeing通過數據事件和數據OBJ屬性調用。

copy (args) { 

    let copyText = document.getElementById(args.target).dataset.password; 

    console.log(copyTest); // output: specific password 

    document.execCommand("Copy"); 
} 

像這樣，它不會將內容複製到剪貼板。有人看到一個錯誤？

UPDATE

下面的代碼工作的HTML元素的實際的textContent。

但我需要複製的數據密碼屬性

let range = document.createRange(); 

let selection = window.getSelection(); 

let node = document.getElementById(args.target); 

range.selectNodeContents(node); 

selection.removeAllRanges(); 

selection.addRange(range); 

document.execCommand("copy"); 

可能的解決方法

所以我寫了一個隱藏的輸入字段中的值的值，選擇它，將它複製並再次刪除臨時隱藏的輸入字段。

但它沒有複製任何東西。

let copyValue = document.getElementById(args.target).dataset.password; 

document.body.insertAdjacentHTML('beforeend', `<input hidden id="temp-copy" value="${copyValue}">`); 

let copyText = document.getElementById('temp-copy'); 

copyText.select(); 

document.execCommand("copy"); 

copyText.remove(); 

Answer 1

複製命令複製當前選擇到剪貼板。因此，你需要複製之前選擇在您輸入文字：

let input = document.getElementById(args.target); 
input.select(); 
document.execCommand("Copy"); 

您可能還需要檢查execCommand這是false如果不支持或啓用命令的返回值。

UPDATE

如果你想複製一個節點不的input或textarea你可以選擇它的文字是這樣的：

var range = document.createRange(); 
var selection = window.getSelection(); 
range.selectNodeContents(document.getElementById('p')); 

selection.removeAllRanges(); 
selection.addRange(range); 

source

Answer 2

請參閱本Dean Taylor回答：https://stackoverflow.com/a/30810322/2879085

下面是一個工作示例：

function copyTextToClipboard(text) { 
 
    var textArea = document.createElement("textarea"); 
 

 
    // 
 
    // *** This styling is an extra step which is likely not required. *** 
 
    // 
 
    // Why is it here? To ensure: 
 
    // 1. the element is able to have focus and selection. 
 
    // 2. if element was to flash render it has minimal visual impact. 
 
    // 3. less flakyness with selection and copying which **might** occur if 
 
    // the textarea element is not visible. 
 
    // 
 
    // The likelihood is the element won't even render, not even a flash, 
 
    // so some of these are just precautions. However in IE the element 
 
    // is visible whilst the popup box asking the user for permission for 
 
    // the web page to copy to the clipboard. 
 
    // 
 

 
    // Place in top-left corner of screen regardless of scroll position. 
 
    textArea.style.position = 'fixed'; 
 
    textArea.style.top = 0; 
 
    textArea.style.left = 0; 
 

 
    // Ensure it has a small width and height. Setting to 1px/1em 
 
    // doesn't work as this gives a negative w/h on some browsers. 
 
    textArea.style.width = '2em'; 
 
    textArea.style.height = '2em'; 
 

 
    // We don't need padding, reducing the size if it does flash render. 
 
    textArea.style.padding = 0; 
 

 
    // Clean up any borders. 
 
    textArea.style.border = 'none'; 
 
    textArea.style.outline = 'none'; 
 
    textArea.style.boxShadow = 'none'; 
 

 
    // Avoid flash of white box if rendered for any reason. 
 
    textArea.style.background = 'transparent'; 
 

 

 
    textArea.value = text; 
 

 
    document.body.appendChild(textArea); 
 

 
    textArea.select(); 
 

 
    try { 
 
    var successful = document.execCommand('copy'); 
 
    var msg = successful ? 'successful' : 'unsuccessful'; 
 
    console.log('Copying text command was ' + msg); 
 
    } catch (err) { 
 
    console.log('Oops, unable to copy'); 
 
    } 
 

 
    document.body.removeChild(textArea); 
 
} 
 

 

 
var copyPasswordBtn = document.querySelector('button.mdl-button.mdl-js-button.mdl-button--icon'); 
 
copyPasswordBtn.addEventListener('click', function(event) { 
 
    var password = document.getElementById('web-password').dataset.password 
 
    console.log(password) 
 
    copyTextToClipboard(password); 
 
});

<p id="web-password" data-password="my-secret-password" 
 
data-state="0"></p> 
 

 
<button class="mdl-button mdl-js-button mdl-button--icon"> 
 

 
    <i data-event="copy" data-obj="util" data-target="web-password" 
 
    class="material-icons clickable-icon">content_copy</i> 
 

 
</button> 
 

 
<p> 
 
    <textarea cols="50" rows="10">Try pasting into here to see what you have on your clipboard: 
 
    
 
    </textarea> 
 
</p>

Answer 3

解

UPDATE

一些好的解決方案。

copyPassword (args) { 

    function handler(event) { 

     event.clipboardData.setData('text/plain', document.getElementById(args.target).dataset.password); 

     event.preventDefault(); 

     document.removeEventListener('copy', handler, true); 
    } 

    document.addEventListener('copy', handler, true); 

    document.execCommand('copy'); 
} 

替代方案。 這也適用。

let range = document.createRange(); 

let selection = window.getSelection(); 

let password = document.getElementById(args.target).dataset.password; 

document.body.insertAdjacentHTML('beforeend', `<p id="temp-copy">${password}</p>`); 

let node = document.getElementById('temp-copy'); 

range.selectNodeContents(node); 

selection.removeAllRanges(); 

selection.addRange(range); 

document.execCommand("copy"); 

document.getElementById('temp-copy').remove();