javascript副本与execCommand
问题描述:
我想从html元素中复制一些内容的数据集。javascript副本与execCommand
HTML代码
<p id="[email protected]{{ 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="[email protected]{{ 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();
答
复制命令复制当前选择到剪贴板。因此,你需要复制之前选择在您输入文字:
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);
答
请参阅本Dean Taylor回答:https://*.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>
答
解
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();
yeaa但据我所知,无法在p htmltag上调用select方法。我试过了,它会抛出一个错误copyText.select不是函数 –
@IlarioEngler在这种情况下 - https://*.com/a/25456308/1401662 – vadim
谢谢我也发现了。但是文本在数据属性中 –