clipboard.js在dialog等弹出框中无效的问题

最新推荐文章于 2024-06-12 10:42:10 发布
最新推荐文章于 2024-06-12 10:42:10 发布
阅读量763 收藏 1
点赞数 1
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hj17629030978/article/details/124644508
版权

最近项目中使用clipboard.js做点击复制的功能,封装了一个小组件,发现在dialog中失效

翻看文档发现这样一句话在这里插入图片描述

文档地址:空白目录 · clipboard.js中文文档 · 看云 (kancloud.cn)

原因就是弹出框会自动focus，而复制的底层实现是要获取选中的内容，失去焦点后就无法获取到了，从而导致复制失败。

我是用的UI框架是vuetify,有比文档更方便的方法,v-dialog自带属性 :retain-focus=“false” 就可以关掉dialog的自动聚焦了

@tangguo123
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
clipboard.min.js.zip
10-12
《HTML文本复制功能实现——深入理解clipboard.min.js》 在Web开发中，有时我们需要实现一个功能，让用户能够方便地复制页面...在实际项目中，结合适当的前端框架和设计模式，`clipboard.min.js`能发挥出更大的效能。
解决clipboard.js在vue的弹窗组件中无效
qq_36391954的博客
04-27 5708
    最近有个需求，用户点击按钮会弹出一个弹窗，弹窗内会有一个复制按钮，点击该复制按钮会将url复制到剪贴板。    项目用的是用vue + quasar UI。我用quasar的Modal封装了一个弹窗组件，并在弹窗组件的mounted方法实例化一个clipboard实例。代码如下：import ClipboardJS from 'clipboard' ... mounted(){ le...
vuetify dialog组件使用clipboard.js 无效怎么办？
jun999
10-23 679
在 vue + vuetify 项目中使用clipboard.js复制功能，普通组件都能正常使用，但是在<v-dialog>中无效，查找大量资料，有绑定ref，有使用vue-clipboard发现都不管用，最后使用如下execCommand原生方式解决复制问题: onCopy(str) { //vuetify 的dialog组件中使用插件clipboard.js无效 使用以下原生方式实现复制功能: str = this.shareUrl; const
解决clipboard.js复制无效
最新发布
学习
06-12 341
当弹窗自动获得焦点时，会打断文本复制操作。复制文本的底层实现依赖于当前页面中有选中的文本内容，而一旦页面失去焦点（如弹出框的显示），可能导致之前选中的内容复制失效。在NaiveUI模态框内实现复制功能时，就需要设置。
解决clipboard.js在vue的弹窗组件中无效或者首次点击无效
GreyCastle的博客
11-14 3086
解决办法： 通过ref获取div元素 代码： <el-button ref="copy" :data-clipboard-text="复制该文字" type="primary" @click="copyCode" size="small">复制</el-button> mounted(){ //mounted中初始化实例，解决第一次复制不触发问题 let copyDomTxt=this.$refs['copy'].$el
clipboard.js剪切板(含sweetalert弹窗)
cai niaoyihao_的博客
04-22 549
clipboard.js剪切板(含sweetalert弹窗)
在bootstrap模态框modal里使用clipboard.js时复制失效
lllo3o的博客
10-17 3201
中文居然没搜索到什么结果，遂google之。 原因： 没有获得焦点（文档↓） For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the container value. 解决方法： 1.增加
用了BootStrap的modal弹窗，vue-clipboard2虽然复制成功，可是无法粘贴
Heartsuit的博客
12-24 1139
背景 一开始用的 BootStrap 的 modal 弹窗里显示信息。 后来有了点击复制的需求，就又使用了 Toastr ，当 BootStrap 弹窗与 Toastr 弹窗这两个同时出来时， vue-clipboard2 的复制功能失效。。 解决方案 这在 vue-clipboard2 的文档中有说明的https://www.npmjs.com/package/vue-clipboard2。 可能是浏览器的限制 然而，我这里并不是这个原因。。 使用this.$copyText(val, conta
ClipboardJS无效解决方案
qq_43413883的博客
08-02 2591
ClipboardJS无效解决方案 需求场景： 列表需要复制链接功能，但是链接内容需动态生成，所以要在每次点击复制链接后请求后端接口，待请求响应后，复制返回内容。 基本实现： async copyLink (event, id) { try { // 请求内容 const text = await getLinkApi(id) const clipboard = new ClipboardJS(event.target, { text: () => te
clipboard.js在移动端复制失败的解决方法
12-01
总之，当遇到clipboard.js在移动端失效的问题时，首先应检查是否有全局禁用文本选择的CSS规则，然后尝试使用不同的实现方式，如通过JavaScript配置参数来避免可能的冲突。同时，查阅官方文档和源码，理解其工作原理...
clipboard.js-master.zip
10-12
这种方法既简单又避免了跨域安全问题，使得clipboard.js在各种现代浏览器中都能稳定工作。 在使用clipboard.js时，我们需要首先引入其库文件。在`clipboard.js-master`压缩包中，我们可以找到项目的主要文件，包括`...
JS点击复制剪贴板鼠标点击文字弹出复制链接按钮
11-11
在开发过程中，有时候需要在点击某一行文字的时候，弹出一个小小的层，然后这个层里面有复制、打开链接等按钮，此插件就是这种效果。
clipboard.min.js/clipboard.js
11-27
然后，在JavaScript中引入`clipboard.min.js`或`clipboard.js`（未压缩版本）： ```html <script src="clipboard.min.js"> ``` 最后，实例化`ClipboardJS`对象并指定目标元素： ```javascript var clipboard = ...
Vue+elementui+clipboard实现点击按钮复制文本域内容
Just do it
04-11 2924
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chal...
vue使用clipboard复制的插件以及踩坑记录
Jul的博客
03-11 988
//安装就不用说了把 npm install clipboard 使用方法： //template 看过很多资料 但是在vue中操作DOM不建议 我们尽量采用ref的方式 <span class="tag" ref="copy" @click="copy" >{{newPassword}}</span> //methods copy() { let copy = this.$refs.copy let clipboard = new Clipboard(c
clipboard.js在弹出框中无法复制的问题
weixin_30809173的博客
04-24 1030
前几天发现了个bug，在jquery-ui的弹出框(dialog)中，使用clipboard.js实现的复制功能，竟然不会生效，后面查了下相关资料，发现不止jquery-ui的dialog不行，其他的模态框，例如bootstrap的，也是一样不会生效的。原因就是弹出框会自动focus，而复制的底层实现是要获取选中的内容，失去焦点后就无法获取到了，从而导致复制失败。 解决办法： 1）对于 Boo...
ElementUI + clipboard 模态弹出框复制链接失效问题
weixin_43799752的博客
06-23 1046
ElementUI 模态弹出框复制链接失效问题 需求是这样的，页面上有一个复制链接的按钮，点击之后弹出模态框，上面有二维码和复制链接按钮。 点击复制链接会通过这个方法打开模态框 showCopyUrl(url) { this.$modal.show({ component: CopyUrl, // 我自己写的复制链接组件 props: { url,
解决el-dialog使用时无法正常弹出的问题
weixin_43550562的博客
04-24 5829
在使用el-dialog,发现无论怎么做,该对话框也无法显示,前端也没有报错. 点击按钮时,发现遮罩层已经出来了,但对话框没有显示. 经查,缺少属性append-to-body,将该值设置为true即可 <!--审批悬浮框--> <el-dialog class="el-dialog__width" ...
vue使用clipboard插件点击复制内容出错/复制出错问题
M612a34的博客
10-12 7254
项目使用vue框架，iview的UI框架。在使用echarts做一个大屏的界面时，添加了点击对很长的网元名称进行复制的需求。 参考了网上对于clipboard插件的引用。这里是他的github地址：https://github.com/zenorocha/clipboard.js 1. 引入clipboard.js   2.在需要使用的组件中import  3. 添加需要复制的内容 4.添...
解决 clipboard.js 在ios中失效的问题
06-01
因此，`clipboard.js` 在 iOS 中失效是因为它依赖 `Clipboard API`，而没有使用 `click` 事件。 为了解决这个问题，你可以通过以下两种方式之一来修复 `clipboard.js` 的 iOS 兼容性问题： 1. 在 `clipboard.js` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值