温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

js剪切、复制和粘贴功能怎么实现

发布时间:2023-05-04 17:43:27 来源:亿速云 阅读:102 作者:iii 栏目:开发技术

本篇内容介绍了“js剪切、复制和粘贴功能怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

针对现代浏览器实现(Navigator.clipboard)

Navigator.clipboard API可以用来访问系统剪贴板,可以实现【剪切、复制、粘贴】功能。该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式,不兼容 IE。

使用 Navigator.clipboard API时会弹出用户授权弹窗。如果用户没有授予权限,则不允许读取或更改剪贴板内容。

let clipBoard = navigator.clipboard;
// 写入文本至操作系统剪贴板
clipBoard.writeText('你好').then(() => {
  this.$message.success('复制成功!')
})
// 写入任意数据(比如图片)至操作系统剪贴板用 clipBoard.write()
// 从剪贴板读取文本
clipBoard.readText().then(clipText => {
  console.log(clipText);
})
// 从剪贴板读取数据(比如图片)用 clipBoard.read()

针对旧版本浏览器实现(document.execCommand)
document.execCommand 针对可编辑内容区域提供了很多有用的 API,包括其中的【剪切、复制、粘贴】功能。

MDN 写到 document.execCommand 方法已废弃。

document.execCommand 的复制有个前提,必须先选中内容,但有时候我们要实现的效果是没有选中这个动作的,比如在手机号后面有个“复制”按钮,点击按钮就直接复制了手机号,这里我们有2种方法实现:

方法1:在 body 动态追加一个隐藏的文本域,再用 select() 方法选中里面的内容,接着 document.execCommand('copy') 进行复制。

function copyText (text) {
  $('body').append(`<textarea id="iclip-container" value="${text}">${text}</textarea>`);
  $('#iclip-container').select();
  if (document.execCommand('copy', false, null)) {
    $('#iclip-container').remove();
    alert('复制成功!')
  }
}

方法2:监听 copy 事件,在事件回调里添加要复制的内容。

function copyText (text) {
  const copy = function(event) {
      let clipboardData = event.clipboardData || window.clipboardData;
      clipboardData.setData('text/plain', text);
      event.preventDefault();
  };
  document.addEventListener('copy', copy);
  document.execCommand('copy');
  document.removeEventListener('copy', copy);
  this.$message.success('复制成功!');
},

剪切、复制、粘贴事件

可以给元素绑定 cut、copy、paste 事件监听剪切、复制、粘贴行为。

// 可以监听 cut 事件对剪切内容进行修改
const source = document.querySelector('div.source');
source.addEventListener('cut', (event) => {
    const selection = document.getSelection();
    event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
    selection.deleteFromDocument();
    event.preventDefault();
});

“js剪切、复制和粘贴功能怎么实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js
AI