【技术】JS 操作剪贴板

2024-06-17 05:04
文章标签 技术 操作 js 剪贴板

本文主要是介绍【技术】JS 操作剪贴板,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JS 操作剪贴板

  • 1、原生 JS 操作剪贴板复制文本
  • 2、原生 JS 操作剪贴板读取图片实现异步上传
    • navigator 对象
    • 监听粘贴事件
  • 3、剪贴板插件

1、原生 JS 操作剪贴板复制文本

在博客类网站看到一段代码,想复制,如果代码量比较大,选中内容复制会比较麻烦。多数情况下会在代码右上角看到一个复制按钮,点击即可复制代码,是如何实现的呢?

准备一个按钮,样式可以自定,绑定一个单击事件

<button type="button" onclick="copyVal()">复制</button>
<div class="content">这里是一段文字...</div>

编写 copyVal() 方法

<script>function copyVal(){// 获取内容的组件let content = document.querySelector(".content");// 选中组件内容window.getSelection().selectAllChildren(content);// 执行拷贝命令document.execCommand("Copy");}
</script>

2、原生 JS 操作剪贴板读取图片实现异步上传

navigator 对象

navigator 对象在使用时有弊端,仅在安全域环境下生效。安全域环境是指:https 请求、localhost、127.0.0.1 作为请求的情况。如果是 IP 地址访问则会出现 navigator.clipboard 是 underfind 的情况。原因是浏览器的安全限制,不希望代码随意访问用户的剪贴板。不过可以采用另外一种方案解决。

async function getImageFromClipboard() {try {// 异步读取剪贴板内容let clipboardItems = clipboardItems = await navigator.clipboard.read();// 遍历剪贴板for (const clipboardItem of clipboardItems) {// 获取剪贴板内容类型for (const type of clipboardItem.types) {// 图片格式判断if (type === 'image/png' || type === 'image/jpeg') {// 获取图片元数据const blob = await clipboardItem.getType(type);// 创建文件读取对象const reader = new FileReader();// 文件读取成功reader.onload = (e) => {// 创建图片文件对象const img = new Image();// 把图片添加到页面元素中$(".img-box")[0].appendChild(img);};// 将数据读取为数据URLreader.readAsDataURL(blob);/* 异步上传图片 */// 构建文件对象,传递 blob 参数const file = new File([blob], "pasted-image." + type.split("/")[1], {type: type,});// 构建表单对象var formData = new FormData();formData.append('files', file);formData.append('language', $("#language").val());ajaxUpload(formData);/* 异步上传图片 */} else {alert("剪贴板最近内容不是图片!");return;}}}} catch (error) {console.error('Failed to read clipboard contents:', error);}
}
/*** 通过表单提交*/
function ajaxUpload(data){$.ajax({url: "/upload",type: "post",cache: false,data: data,processData: false,// 不处理数据contentType: false, // 不设置内容类型dataType: "json",success: function (data) {console.log("请求成功:", data);// 这里是请求成功的业务逻辑},error: function () {console.log("请求失败!")}});
}

监听粘贴事件

navigator 对象的使用弊端可以曲线救国,通过监听粘贴事件实现相关业务。

document.onpaste = function(event){try {// 获取剪贴板的元素集合var items = (event.clipboardData || event.originalEvent.clipboardData).items;// 遍历剪贴板元素for (var i = 0 ; i < items.length ; i++) {var item = items[i];// 判断图片类型if (item.type.indexOf("image") != -1) {// 元素转换为文件对象var file = item.getAsFile();/* 图片展示到页面 */// 创建读取文件组件(JS内置对象)var fr = new FileReader();// 读取文件fr.readAsDataURL(file);// 当数据读取完成的触发一个事件fr.onload = function () {// 获取文件数据var url = fr.result;let img = `<img src="${url}" id="showImg"/>`;// 把图片展示到页面$(".img-box").append(img);}/* 图片展示到页面 *//* 异步上传图片 */// 构建表单对象var formData = new FormData();// 表单添加文件,注意第一个参数是传递数据的 key,也就是 input file 的 name 属性的值formData.append('files', file);ajaxUpload(formData);/* 异步上传图片 */break;}}} catch (error) {console.error('Failed to read clipboard contents:', error);}
}

3、剪贴板插件

因为代码兼容问题,可以使用剪贴板插件:https://clipboardjs.com/

这篇关于【技术】JS 操作剪贴板的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1068542

相关文章

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

MySQL追踪数据库表更新操作来源的全面指南

《MySQL追踪数据库表更新操作来源的全面指南》本文将以一个具体问题为例,如何监测哪个IP来源对数据库表statistics_test进行了UPDATE操作,文内探讨了多种方法,并提供了详细的代码... 目录引言1. 为什么需要监控数据库更新操作2. 方法1:启用数据库审计日志(1)mysql/mariad

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》:本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-

Qt如何实现文本编辑器光标高亮技术

《Qt如何实现文本编辑器光标高亮技术》这篇文章主要为大家详细介绍了Qt如何实现文本编辑器光标高亮技术,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以了解下... 目录实现代码函数作用概述代码详解 + 注释使用 QTextEdit 的高亮技术(重点)总结用到的关键技术点应用场景举例示例优化建议

Oracle 数据库数据操作如何精通 INSERT, UPDATE, DELETE

《Oracle数据库数据操作如何精通INSERT,UPDATE,DELETE》在Oracle数据库中,对表内数据进行增加、修改和删除操作是通过数据操作语言来完成的,下面给大家介绍Oracle数... 目录思维导图一、插入数据 (INSERT)1.1 插入单行数据,指定所有列的值语法:1.2 插入单行数据,指

SQL中JOIN操作的条件使用总结与实践

《SQL中JOIN操作的条件使用总结与实践》在SQL查询中,JOIN操作是多表关联的核心工具,本文将从原理,场景和最佳实践三个方面总结JOIN条件的使用规则,希望可以帮助开发者精准控制查询逻辑... 目录一、ON与WHERE的本质区别二、场景化条件使用规则三、最佳实践建议1.优先使用ON条件2.WHERE用

Linux链表操作方式

《Linux链表操作方式》:本文主要介绍Linux链表操作方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、链表基础概念与内核链表优势二、内核链表结构与宏解析三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势六、典型应用场景七、调试技巧与