欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js 将html元素内的文本或者变量值 复制到 剪切板

程序员文章站 2022-05-15 23:50:26
...

推荐使用第二种方法

 

方法一:使用第三方插件:clipboard.js

官方链接:https://clipboardjs.com/

1,直接下载js文件,在script脚本中直接引用

<script src="static/clipboard.min.js"></script>

或者:

2,安装npm包

npm install clipboard --save 
import Clipboard from 'clipboard'

3,复制input中的文本

<input id="input" value="clipboard">

<button class="btn" data-clipboard-target="#input">点击复制</button>
import Clipboard from 'clipboard';

const btnCopy = new Clipboard('btn');

 4,复制变量中的值

<button class="btn" :data-clipboard-text="copyValue">点击复制</button>
import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
this.copyValue = 'clipboard';

5, 添加回调函数

// 复制成功后执行的回调函数
clipboard.on('success', function(e) {
 console.info('Action:', e.action); // 动作名称,比如:Action: copy
 console.info('Text:', e.text); // 内容,比如:Text:clipboar
 console.info('Trigger:', e.trigger); // 触发元素:比如:<button class="btn" :data-    
 clipboard-text="copyValue">点击复制</button>
 e.clearSelection(); // 清除选中内容
});
 
// 复制失败后执行的回调函数
clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
});

6,最后可以,用完可以销毁这个库

btn.destroy()

 

方法二:document.execCommand()方法

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
  • aCommandName :表示命令名称,比如: copy, cut 等(更多命令见命令);
  • aShowDefaultUI:是否展示用户界面,一般情况下都是 false;
  • aValueArgument:有些命令需要额外的参数,一般用不到;

 基本上主流浏览器都能兼容

1,输入框的文本内容复制:

<input id="input" value="copy value">
<button @click="copyJsonToClipboard()">点击复制</button>

 

copyJsonToClipboard() {
   const input = document.querySelector('input')
   input.select()
   if (document.execCommand('copy')) {
      this.$message({
         type: 'success',
         message: '报文已复制到剪切板'
         })
      }
}

 2. 复制变量的值

<button @click="copyJsonToClipboard()">点击复制</button>
copyJsonToClipboard(json) {
   const input = document.createElement('input')
   document.body.appendChild(input)
   input.setAttribute('value', json)
   input.setAttribute('readonly', 'readonly')
   input.select()
   input.setSelectionRange(0, 9999) // 如果select 没有选择到
   if (document.execCommand('copy')) {
      this.$message({
         type: 'success',
         message: '报文已复制到剪切板'
         })
      }
   document.body.removeChild(input)
}

 

付链接:

https://github.com/zenorocha/clipboard.js

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://www.jb51.net/article/135605.htm