使用exece命令复制javascript

我想从一个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>

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

这样就不会将内容复制到剪贴板。有人看到错误了吗

更新

以下代码适用于htmlelement的实际文本内容

但我需要从数据密码属性复制值

<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>

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

let copyValue=document.getElementById（args.target）.dataset.password；
document.body.insertAdjacentHTML（'beforeend'，`'）；
让copyText=document.getElementById（'temp-copy'）；
copyText.select（）；
文件。执行命令（“副本”）；
copyText.remove（）；

复制命令将当前选择复制到剪贴板。因此，在复制之前，您需要选择输入中的文本：

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

如果命令不受支持或未启用，您可能还需要检查

execCommand

的返回值，该值为

false

更新

如果您试图复制的节点不是

输入

或

文本区域

，您可以如下选择其文本：

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

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

---

请参考迪安·泰勒的回答：

以下是一个工作示例：

功能copyTextToClipboard（文本）{
var textArea=document.createElement（“textArea”）；
//
//***此样式是一个额外步骤，可能不需要***
//
//为什么会在这里？为了确保：
//1.元素能够有焦点和选择。
//2.如果元素要进行flash渲染，则其视觉影响最小。
//3.在选择和复制时，较少出现**可能**的片状，如果
//textarea元素不可见。
//
//很可能元素甚至不会渲染，甚至连一个闪光都不会，
//所以其中一些只是预防措施。但是在IE元素中
//当弹出框询问用户的权限时可见
//要复制到剪贴板的网页。
//
//放置在屏幕左上角，与滚动位置无关。
textArea.style.position='fixed'；
textArea.style.top=0；
textArea.style.left=0；
//确保其宽度和高度较小。设置为1px/1em
//不起作用，因为这在某些浏览器上会产生负w/h。
textArea.style.width='2em'；
textArea.style.height='2em'；
//我们不需要填充，如果它进行flash渲染，则可以减小大小。
textArea.style.padding=0；
//清理边界。
textArea.style.border='none'；
textArea.style.outline='none'；
textArea.style.boxShadow='none'；
//如果出于任何原因渲染，请避免白色框闪烁。
textArea.style.background='transparent'；
textArea.value=文本；
document.body.appendChild（textArea）；
textArea.select（）；
试一试{
var successful=document.execCommand（'copy'）；
var msg=successful？'successful'：'successful'；
log（'复制文本命令为'+msg'）；
}捕捉（错误）{
log（'Oops，无法复制'）；
}
document.body.removeChild（textArea）；
}
var copyPasswordBtn=document.querySelector（'button.mdl button.mdl js button.mdl button--icon'）；
copyPasswordBtn.addEventListener（'click'，函数（事件）{
var password=document.getElementById（'web-password'）.dataset.password
console.log（密码）
copyTextToClipboard（密码）；
});

内容拷贝

尝试粘贴到此处以查看剪贴板上的内容：
解决方案

更新

更好的解决方案

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

let range=document.createRange（）；
让selection=window.getSelection（）；
让password=document.getElementById（args.target）.dataset.password；
document.body.insertAdjacentHTML（'beforeend'，`
${password}
`）；
让节点=document.getElementById（'temp-copy'）；
范围。选择节点内容（节点）；
selection.removeAllRanges（）；
选择。添加范围（范围）；
文件。执行命令（“副本”）；
document.getElementById（'temp-copy'）.remove（）；
是的，但据我所知，无法在p htmltag上调用select方法。我试过了，它抛出了一个错误copyText.select不是function@IlarioEngler那样的话，谢谢，我也发现了。但是文本在一个数据属性中，正如我在最初的问题中所写的：我想从一个html元素中复制一些数据集的内容。最新的Chrome浏览器我在iOS 11上的mobile safari上尝试过这个，但没有用。