我正在编写一个小脚本来简化重新格式化粘贴文本(尤其是电话号码)的过程。我的目标是将文本粘贴到文本框中,并将格式化结果自动复制到我的剪贴板,以最大限度地减少手动点击。
修改剪贴板的功能只有在真正的点击事件发生时才起作用。我尝试了各种方法,例如以编程方式调用 .click()、调度“click”事件、利用 async/await 和 Promise
JSFiddle 代码: https://jsfiddle.net/ByteBender/7bukf5xh/9/
document.getElementById('myInput').addEventListener('paste', event => {
const contents = event.clipboardData.getData('text')
if (contents.length >= 9) {
event.preventDefault()
const formattedNumber = formatPhoneNumber(contents)
myInput.value = formattedNumber
copyToClipboard()
// Also failed to copy
//myButton.click()
// Also failed to copy
//setTimeout( () => myButton.dispatchEvent(new Event('click')), 500 )
}
});
function copyToClipboard() {
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(copyText.value)
.then(()=> console.log('success!'))
.catch(err=>console.error(`fail: ${err}`))
}
// Also failed to copy
/* function tempButton(){
var button = document.createElement('button');
button.innerHTML = 'click me';
button.onclick = function(){
copyToClipboard();
return false;
};
document.body.appendChild(button);
//button.click()
} */
在 Chrome/Chromium 中,我相信这应该无需修改即可工作。 Firefox 需要暂时激活。
作为解决方法,您可以
window.addEventListener()
处理所有可能的瞬态激活授予事件,并使用其中的剪贴板 API。
clipboardFunc = () => {
navigator.clipboard.writeText("hello");
console.log("Copied to clipboard! Removing self.");
removeClipboardFunc();
}
removeClipboardFunc = () => {
window.removeEventListener("keydown", clipboardFunc);
}
window.addEventListener("keydown", clipboardFunc);
我认为质疑这样绕过保护并针对用户进行攻击是否真的是一个好主意可能是一个好主意。如果有人的剪贴板中有重要的东西怎么办?