JS复制粘贴功能实现

这篇具有很好参考价值的文章主要介绍了JS复制粘贴功能实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JS复制粘贴功能实现

本章记录如何通过js代码实现复制内容到剪切板,之后可以粘贴到需要的地方的功能。

分为两个部分内容:

  • 前两个部分使用execCommand方法,该方法现在被弃用(ps:虽然也还可以用就行了), 且对于单行内容的复制需要结合input标签实现,多行内容的复制需要结合textarea标签实现。

  • 第三个部分,则是现在使用Clipboard API来实现单行或多行内容的复制。(推荐方法)

1-execCommand方法

该方法是在document对象下的方法,现已被弃用,但在这里考虑到以前已经使用过这样的方法实现复制功能了,也写在这里,现在仍然可用。

单行复制

通过input标签将需要复制的内容传递给value属性,之后通过document对象下execCommand方法执行复制功能即可。

具体实现如下:

handleCopy() {
  let copy_text = '需要复制的内容';//拿到想要复制的值
  
  let input_dom = document.createElement('input');//创建input元素
  input_dom.value = copy_text;//添加需要复制的内容到value属性
  document.body.appendChild(input_dom);//向页面底部追加输入框
  input_dom.select();//选择input元素
  document.execCommand("Copy");//执行复制命令
  alert("复制成功!");//弹出提示信息,不同组件可能存在写法不同
  
  //复制之后再删除元素,否则无法成功赋值
  input_dom.remove();//删除动态创建的节点
},

上面的方法在页面需要触发复制功能的时候添加到对应鼠标事件即可。

多行复制

通过textarea标签将需要复制的内容传递给value属性,并在需要换行的内容后面加入换行符\r\n,之后通过document对象下execCommand方法执行复制功能即可。

具体实现如下:

handleCopy() {
  let copy_text = '第一行需要复制的内容\r\n第二行需要复制的内容';//拿到想要复制的值
  
  let textarea_dom = document.createElement('textarea');//创建textarea元素
  document.body.appendChild(textarea_dom);//向页面底部追加输入框
  textarea_dom.value = copy_text; //添加需要复制的内容到value属性
  textarea_dom.select();//选择input元素
  document.execCommand("Copy");//执行复制命令
  alert("复制成功!");//弹出提示信息,不同组件可能存在写法不同
  
  //复制之后再删除元素,否则无法成功赋值
  document.body.removeChild(textarea_dom); //删除动态创建的节点
}

上面的方法在页面需要触发复制功能的时候添加到对应鼠标事件即可。

2-Clipboard API(推荐)

Clipboard API中的 navigator.clipboard.writeText 方法可以更加简单的实现单行和多行的内容复制,而且该方法会返回一个Promise对象,可以帮助我们简单处理复制成功或复制失败后需要执行的内容。

具体实现如下:

handleCopy() {
  let copy_text = '第一行需要复制的内容\r\n第二行需要复制的内容';//拿到想要复制的值
  
  // 使用Clipboard API复制文本到剪贴板中
  navigator.clipboard.writeText(copy_text).then(() => {
    alert("复制成功!")
  }).catch((err)=>{
    alert("复制失败!")
  })
}

上面的方法在页面需要触发复制功能的时候添加到对应鼠标事件即可,且在复制内容中,直接支持换行符的实现。

注意:

上面的navigator.clipboard.writeText方法只有在游览器的navigator对象下才会存在clipboard对象;如果你是在vue,react等前端框架中像上面的方法调用clipboard对象,是不存在的。

因为在这类前端框架中编写js的环境下的navigator对象并没有提供clipboard对象,而且clipboard对象并不是navigator对象的标准属性或方法。

因此,在这类框架中需要使用Clipboard API需要通过第三方依赖的方法去实现。

下面以常见的vue框架中使用Clipboard API为例:

1、首先按照第三方Clipboard依赖

npm install clipboard --save

2、在页面文件中引入或在main.js全局引入

import Clipboard from 'clipboard'

3、在需要实现复制功能的方法中,写入实现

<template>
	<div>
    <div class="copy_dom" @click="handleCopy"></div>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
  data: {
    clipboard: null
  }
  methods: {
  	handleCopy() {
      // 传递事件绑定的元素class名和需要复制的内容text,创建Clipboard实例 
	  this.clipboard = new Clipboard('.copy_dom', {
        text: () => {
          return '第一行需要复制的内容\r\n第二行需要复制的内容'
        }
      });
      // 复制成功后的回调函数
      this.clipboard.on('success', () => {
        // 释放内存,非常重要,不然会重复触发回调函数
		this.clipboard.destroy();
        console.log('复制成功!');
      })
     	// 复制失败后的回调函数
      this.clipboard.on('error', function(e) {
        console.log('复制失败!');
      })
		}
  },
  //beforeDestroy() {
  //  this.clipboard.destroy(); //组件页面销毁时,需要手动清理clipboard,释放内存
  //}
}
</script>

上面的代码中,clipboard实例在复制成功后,建议在success的回调函数中执行实例销毁的destroy方法;也可以在页面组件关闭后的beforeDestroy生命周期执行销毁方法。文章来源地址https://www.toymoban.com/news/detail-653096.html

到了这里,关于JS复制粘贴功能实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js 粘贴功能

    项目中需要使用粘贴功能,将已复制的内容粘贴到输入框中。(vue项目使用elementUI,该粘贴功能是浏览器自带功能,属于通用功能) html js css JavaScript:实现复制粘贴剪切功能

    2024年01月24日
    浏览(24)
  • 安卓:实现复制粘贴功能

    目录 一、介绍 (一)ClipboardManager介绍 1、ClipboardManager常用方法: 2、获取 ClipboardManager实例 (二)、ClipData介绍 1、创建ClipData对象: 2、获取ClipData的信息: 3、ClipData.Item对象: 二、 例子 复制粘贴的辅助类ClipboardHelper :   MainActivity:  activity_main:  运行结果:     Cli

    2024年02月07日
    浏览(36)
  • 编程实现对某个文件的复制功能——右键可粘贴

    作者:小 琛 欢迎转载,请标明出处 实现功能:传入一个文件的完整路径,实现运行代码后,该文件被复制——相当于鼠标右键,复制功能。

    2024年02月15日
    浏览(49)
  • Vue-Clipboard3:轻松实现复制到粘贴板功能

    在现代Web开发中,剪贴板操作变得越来越重要。用户经常需要在浏览器中进行复制、粘贴等操作,而这些操作可以通过JavaScript实现。Vue-Clipboard3是一个基于Clipboard.js的粘贴板操作库,使用 Vue-Clipboard3 可以在Vue 3(composition api)中轻松复制到粘贴板,它使得在Vue3应用程序中进行

    2024年01月20日
    浏览(43)
  • 前端js如何实现截屏功能,插件推荐js-web-screen-shot

    读取dom结构转换成canvas,最后转成图片形式展示 缺点 :没有编辑功能 链接:html2canvas 大佬模仿qq截图实现的,也可以搭配webrtc实现web端远程桌面共享 链接: github gitee 简单使用 注意点:

    2024年02月06日
    浏览(44)
  • vue+face-api.js实现前端人脸识别功能

    近期做了一个前端vue实现人脸识别的功能,主要功能逻辑包含:人脸识别,人脸验证,唤起摄像头视频流之后从三个事件(用户点头、摇头、眨眼睛)中随机选中两个事件,待两个事件通过判断后人脸静止不动3秒钟后截取视频流生成图片,上传到阿里或者腾讯oss,通过oss返回

    2024年02月05日
    浏览(42)
  • 有趣且重要的JS知识合集(18)浏览器实现前端录音功能

    兼容多个浏览器下的前端录音功能,实现六大录音功能: 1、开始录音 2、暂停录音 3、继续录音 4、结束录音 5、播放录音 6、上传录音 初始状态: 开始录音: 结束录音: 录音流程 : 示例中的三个按钮其实包含了六个上述功能,点击开始时开始录音,可以暂停/结束录音,此

    2024年02月04日
    浏览(52)
  • 使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能

    引言: 随着互联网的快速发展和智能手机的普及,电子商务行业正迎来一个全新的时代。越来越多的消费者选择网上购物,而不再局限于传统的实体店。这种趋势不仅仅是改变了消费者的习惯购物,也给企业带来了巨大的商机。为了不断满足消费者的需求,电子商务网站需要

    2024年02月15日
    浏览(54)
  • vue elementui 实现从excel从复制多行多列后粘贴到前端界面el-table

    可以全部复制粘贴,也可以单独对某行、某列进行复制粘贴 从excel复制粘贴到前端页面的table上 html部分: js部分:

    2024年02月04日
    浏览(54)
  • 扩展element-ui el-upload组件,实现复制粘贴上传图片文件,带图片预览功能

    控件改造 在窗口的 el-form 控件参数中添加 @paste.native 事件,事件绑定方法名 handlePaste 也可以在其他控件中添加事件监听,看个人需求。 注意: 监听粘贴事件时,需要当前页面先获取焦点,否则无法正常监听, 可以在页面加载后调用 focus() 获取焦点 粘贴功能Js部分参考资料

    2023年04月08日
    浏览(91)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包