execCommandでjavascriptをコピー

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> 

コピー方法

方法は、データ・イベントとデータ-OBJ属性を介して呼び出されるbeeingて。

copy (args) { 

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

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

    document.execCommand("Copy"); 
} 

このように、コンテンツをクリップボードにコピーしません。誰かがエラーを見ますか？

UPDATE

次のコードは、のHTMLElementの実際の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"); 

データ-password属性から値をコピーする必要があります一時的な非表示の入力フィールドを再度削除してください。

しかし、何もコピーしません。

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

コピーコマンドをクリップボードにコピーし現在の選択。したがって、あなたは、コピーする前に、あなたの入力中のテキストを選択する必要があります：あなたは、コマンドがサポートまたは有効でない場合falseあるexecCommandの戻り値をチェックすることもできます

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

。UPDATE

コピーしようとしているノードがされていない場合

inputまたはtextareaあなたはそれがこのようなテキストです選択することができます。

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

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

source

Answer 2

これを参考にしてくださいディーン・テイラーの答え：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

よりよい解決策：3210はここで実施例です。

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();