点击复制内容到手机粘贴板(简洁易懂-只需五步)

news/2025/2/7 12:36:21/

点击按钮复制内容到手机粘贴板

只需简单五步

第一步

npm install clipboard --save

第二步

在需要的页面引入(注:路径根据文件…/) 代码如下↓

<script>
import ClipboardJS from '../../../node_modules/clipboard/dist/clipboard.js'
export default {
}
</script>

第三步

在点击复制触发的函数里new一个实例出来并挂到this上 代码如下↓

this.clipboardJS = new ClipboardJS('.btn')
//.btn为点击复制按钮的类名

第四步

在按钮上添加类名btn并添加如下代码data-clipboard-text=“需要复制的内容” 代码如下↓

<button class="btn" :data-clipboard-text="kaquan.value">点击复制卡券码</button>

第五步

按钮上添加类名needsclick 解决ios不兼容问题 按钮最终版代码如下↓

<button class="btn needsclick" :data-clipboard-text="kaquan.value">点击复制卡券码</button>

现在点击按钮就可以复制需要复制的内容到手机粘贴板上了,并且不会有ios和安卓的兼容问题


http://www.ppmy.cn/news/826753.html

相关文章

html+js实现点击按钮复制文本内容到剪切板上

首先需要定义一个input框&#xff0c;如果你想实现的效果是&#xff0c;用户输入后&#xff0c;点击按钮&#xff0c;复制文本框的内容&#xff0c;那这种做法应该是很适合的。 <input type"text" value"" id"wechat">在js中&#xff1a;…

【用复制粘贴让脚本动起来(一)】实现简单的屏幕点击

反思总结 2022-2-9 想法思路1. 认识CmpColorEx函数2. 用File插件处理字符串3. 设计程序框架 debug 想法 按键精灵中找色功能都可用字符串操作&#xff0c;所以读取预先写好文本传入到自定义的函数中&#xff0c;可快速创建一个稳定的脚本。 #mermaid-svg-eI99yyrehDs0iota .la…

简单的jquery一键复制值到剪切板--clipboard

笔者再开发中遇到了新的需求&#xff0c;把生成的链接通过一个按钮直接复制到剪切板让用户复制给其他人或浏览器访问&#xff0c;原本以为jquery应该有封装好的方法&#xff0c;查询后发现没有&#xff0c;找了很多js发现大部分是通过swf文件来做的&#xff0c;不好用&#xff…

js 复制文本到剪切板 document.execCommand(“copy“)

本函数的原理是调用document.execCommand的copy命令 document.execCommand("copy")对不同浏览器的兼容性不同&#xff0c;详情请在这里参考 函数&#xff1a; /*** 复制文本到剪切板* param {String|Number} value 需要复制的文本* return {Boolean}*/ functio…

java播放音频文件 粘贴运行!

先导入&#xff1a; java.io.*; javax.sound.sampled.*; public static void main(String[] args){ play(); } public static void play() { String fileUrl "你的文件路径"; try{ AudioInputStream ais AudioSystem.getAudioInputStream(new File…

使用clipboard实现点击复制到粘贴板

1.需求 实现复制任意值到粘贴板的功能。 2.实现 思路&#xff1a;创建input dom后将被复制的值放入input。执行浏览器的复制方法或clipboard的复制方法进行复制操作。复制完成后删除创建的input。 import Clipboard from clipboardexport function copy(str) {const oInput …

点击按钮复制到剪切板

一、需求场景&#xff1a; 点击复制按钮&#xff0c;复制文字到剪切板 二、代码实现&#xff1a; // 用浏览器自带的copy功能只能复制文本框里面的内容&#xff0c;因此要创建文本框 // 用浏览器自带的copy功能只能复制文本框里面的内容&#xff0c;因此要创建文本框 functi…

监听浏览器复制粘贴事件开箱即用的复制到剪切板

监听键盘ctrlc ctrlv area.onkeydown (event) > { if (event.ctrlKey) {if (event.keyCode 67) {alert(ctrlc复制)event.keyCode 0;}if (event.keyCode 86) {alert(ctrlv粘贴)}}}; 监听浏览器右键复制粘贴 let isRight false;area.onmousedown (event) > { // 右键…