1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | window.addEventListener("paste", function (e) { if (!(e.clipboardData && e.clipboardData.items)) { return; } for (var i = 0, len = e.clipboardData.items.length; i < len; i++){ var itemz = e.clipboardData.items[i]; if (itemz.kind === "string") { itemz.getAsString(function (str) { // alert(str); }); } else if(itemz.kind === "file") { var pasteFile = itemz.getAsFile(); alert(pasteFile); } }}); |
You are here
JS实现获取剪切板 剪贴板内容的方法 有大用 有大大用
星期五, 2023-08-25 15:18 — adminshiping1
下面是自己亲自做的代码 ,,如果 剪切板获取不到数据 见 /node-admin/19472
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
function aaa(){
if(navigator.clipboard){
navigator.clipboard.readText()
.then(text => console.log(text))
.catch(error => console.log('获取剪贴板内容失败：', error));
} else {
console.log('当前浏览器不支持Clipboard API');
}
}
async function parseClipboardImageData() {
const items = await navigator.clipboard.read()
for (let item of items) {
for (let type of item.types) {
if (type.startsWith("image/")) {
return item
.getType(type)
.then(blob => {
return new Promise((resolve) => {
const fileReader = new FileReader();
fileReader.onload = () => {
const srcData = fileReader.result;
console.log(srcData);
resolve(srcData);
};
fileReader.readAsDataURL(blob);
})
})
}
}
}
}
parseClipboardImageData();
</script>
<body onload="aaa()">
</body>
</html>
下面也是自己亲自做的代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
function aaa(){
const $file = document.querySelector(".local");
$file.addEventListener("change", (event) => {
const selectedfile = event.target.files;
if (selectedfile.length > 0) {
const [imageFile] = selectedfile;
const fileReader = new FileReader();
fileReader.onload = () => {
const srcData = fileReader.result;
console.log('base64:', srcData)
};
fileReader.readAsDataURL(imageFile);
}
});
}
</script>
<body onload="aaa()">
<input type="file" accept="image/*" class="local" />
</body>
</html>
下面同样也是自己亲自做的代码 <!doctype html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<title></title>
<script>
const getBase64Image = src => {
return new Promise(resolve => {
let xhr = new XMLHttpRequest()
xhr.open('get', src, true)
xhr.responseType = 'blob'
xhr.onload = function () {
if (this.status == 200) {
let blob = this.response
let oFileReader = new FileReader()
oFileReader.onloadend = function (e) {
const base64 = e.target.result
console.log(base64);
resolve(base64)
}
oFileReader.readAsDataURL(blob)
}
}
xhr.send()
});
}
getBase64Image('/misc/arrow-asc.png');
</script>
</head>
<body>
</body>
</html>
获取剪贴板内容是Web开发中一个广泛的需求。使用JavaScript可以实现获取剪贴板的内容，下面是实现步骤的完整攻略。
1. 使用Clipboard API
Javascript提供了navigator.clipboard全局对象，可以通过该对象实现对剪贴板的读取和写入操作。调用navigator.clipboard.readText()方法可以异步读取剪贴板的文本内容。
下面是使用Clipboard API读取剪贴板内容的示例代码：
if(navigator.clipboard){
navigator.clipboard.readText()
.then(text => console.log(text))
.catch(error => console.log('获取剪贴板内容失败：', error));
} else {
console.log('当前浏览器不支持Clipboard API');
}
注意：Clipboard API由于安全原因只适用于HTTPS协议下，HTTP协议将无法使用该API。
2. 使用document.execCommand()
除了使用Clipboard API，也可以使用document.execCommand()来读取剪贴板内容。该方法是针对文档编辑器设计的API，但可以用于获取剪贴板内容。
下面是使用document.execCommand()读取剪贴板内容的示例代码：
let contentEditable = document.createElement('div'); // 新建元素
contentEditable.contentEditable = true; // 允许该元素中的文本可编辑
document.body.appendChild(contentEditable); // 添加元素到body中
contentEditable.focus(); // 元素获得焦点
document.execCommand('paste'); // 获取剪贴板中的内容
let text = contentEditable.innerText; // 从该元素中读取内容
document.body.removeChild(contentEditable); // 移除元素
console.log(text);
该方法的原理是在一个可编辑的元素中执行paste命令，使得从剪贴板中的内容被粘贴到该元素中。然后再从该元素中读取内容，完成获取剪贴板的过程。
来自 https://pythonjishu.com/vacyqxtvxmrhzet/
JavaScript如何获取剪切板内容
- document.querySelector('#input').focus();
- document.execCommand('paste');
来自 https://blog.csdn.net/weixin_42584758/article/details/129595789
js获取剪贴板的内容
来自 https://www.cnblogs.com/web928943/p/14976239.html
JS实现获取剪贴板内容的方法
本文实例讲述了JS实现获取剪贴板内容的方法。分享给大家供大家参考，具体如下：
这里介绍了JS获取剪贴板内容的代码：
<Script Language="JavaScript">
var content = clipboardData.getData("Text");
if (content!=null) {
document.write("<center><font size=5 color=red>WARNING, TEXT RETRIEVED:</font> (see below)<br><br><span style='background-color: #FFFF00'>");
document.write(content);
document.write("</span>");}
else {
document.write('<center>No text found in clipboard. This is a good thing!<br><br>Works with Internet Explorer and Netscape.');
}
</Script>
var o=pos.parentElement().parentNode;
var txt=window.clipboardData.getData("Text");
$('#tempForClip').val(txt);
var temp=$('#tempForClip').val();
window.clipboardData.setData("Text",temp);
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
来自 https://m.xp.cn/b.php/94547.html
普通分类: