js中的一键复制功能

weixin_47389477

已于 2024-08-16 16:05:18 修改

阅读量149

点赞数 2

分类专栏：前端高级功能笔记文章标签： javascript 开发语言 ecmascript

于 2024-08-16 15:55:37 首次发布

本文链接：https://blog.csdn.net/weixin_47389477/article/details/141260108

版权

笔记同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

前端高级功能

8 篇文章 0 订阅

订阅专栏

文章目录

前言

在前端开发中，有时候需要对内容比如订单编号，货物编号进行复制处理业务，但是编码有比较长，手动一个个的录入不仅费时还容易录入错误，这时的一键复制功能就显的很方便。

查阅相关资料得知，js有个方法是可以实现复制功能的

document.execCommand('copy') //拷贝/复制 
document.execCommand('cut') //剪切
document.execCommand('paste') //粘贴

execCommand的兼容性

在这里插入图片描述

页面

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一键复制</title>
</head>

<body>
  <input type="text" id="input" value="Hello World">
  <button>一键复制</button>
  <script>
    var button = document.querySelector('button');
    button.addEventListener('click', function () {
      var input = document.querySelector('input');
      var value = input.value;
      input.select();
      copyToClipboard(value);
      alert('已复制到剪贴板');
    });
    function copyToClipboard(text) {
      document.execCommand('copy');

    }
  </script>
</body>

</html>

通过下载clipboard.js 库实现

npm install clipboard --save

在组件中使用

import Clipboard from 'clipboard'

<template>
<div>
<input  id='input' :value='val'>
<button @click="copy"> copy</button>
</div>
</template>

<script setup>
import {ref} from 'vue'
import  Clipboard from 'clipboard' 

const val = ref('hello world')
const copy (res=val.value){
let clipboard = new Clipboard("#input",{
  text: function() {
        return res
    }}) 
//复制成功
clipboard.on('success',()=>{
alert('复制成功')
clipboard.destroy(); //清理 Clipboard.js 所创建的事件和对象
})
}
</script>

或者引入CDN 引入
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

weixin_47389477

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js中的一键复制功能

在前端开发中，有时候需要对内容比如订单编号，货物编号进行复制处理业务，但是编码有比较长，手动一个个的录入不仅费时还容易录入错误，这时的一键复制功能就显的很方便。查阅相关资料得知，js有个方法是可以实现复制功能的document.execCommand('copy') //拷贝/复制document.execCommand('cut') //剪切document.execCommand('paste') //粘贴。
复制链接

扫一扫

专栏目录