移动端实现点击按钮复制文本功能
最近处理了一个点击复制按钮,复制文本的功能, 百度了一通,有用clipboard这个插件的, 有用css的, 有用dom的select方法的. 这里我选择了dom的select方法.
参考链接: 前端vue.js实现点击复制功能(完美解决移动端可用)
介绍一下, select() 方法用于选取文本域中的内容
, 我的理解就是用于input的type为text
的情况, 或者说是textarea
.
因为我的需求是展示一个优惠码, 如果用Input来做展示的话, input的宽度是固定的,没法随着内容来自适应宽度. 一开始我想到了用Input的hidden
,但是不行, 后来我又尝试把input display: none, 以及 visibility:hidden, 都不行, 后来用 opacity:0, 可以. 然后我把input的宽度设为0, 又不行了, 至少要给1px的宽度.然后用一个其他的标签, span, p等, 来展示优惠码的内容. 可以同时满足这个需求在功能和样式上的要求.
如果你要使用点击复制功能但是不想使用Input框来做展示, 需要注意以下几点:
- selec()方法只能用于
input, type="text"和textarea
(type="hidden"没用)display:none; visibility:hidden;
无法执行浏览器的复制方法opacity:0
可以使用, 浏览器的复制方法仍然生效input的宽度最小为1px
代码如下:
<!-- html代码 --><input class="opacity0 w10" id="couponCode" :value="coupon.couponNum" readonly /><span class="ml6 fw400" >{{ coupon.couponNum }}</span><van-button click="copy('couponCode')">复制</van-button >
// js 代码
copy(id) {var copycode = document.getElementById(id)console.log(copycode)copycode.select() // 选择对象document.execCommand('Copy') // 执行浏览器复制命令this.$toast('复制成功')
}
效果如下:
移动端实现点击按钮复制文本功能相关推荐
- html 复制文本按钮,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 ...
- js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- html5点击复制文本框内容,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 ...
- 点击按钮复制文本框内容
点击按钮复制文本框内容 复制文本框内容的方法如下: function Copy(){var e=document.getElementById("content");//对象是co ...
- vue怎么实现点击复制html,Vue实现点击按钮复制文本内容的例子
Vue实现点击按钮复制文本内容的例子 点击复制功能主要通过 clipboard.js 来实现 在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话 ...
- JS复制文本到粘贴板,前端H5移动端点击按钮复制文本到粘贴板。
最近做手机端H5网页里面有个活动:点击按钮复制邀请码.查过一些方法,在电脑端可以复制粘贴,一放在手机上面打开网页就不能复制粘贴了. 直接进入正题 使用开源项目 clipboard.js, 官网:点击打 ...
- 实现点击按钮复制文本(Clipboard包)
操作如下: npm install clipboard --save import Clipboard from 'clipboard'; Vue.use(VueClipboard) <temp ...
- 实现点击按钮 复制文本内容
一.原生方法 1.结构 <li><span>运单号码:</span><b id="waybill_number">{$order-& ...
- vue 适配微信浏览器 实现点击按钮复制文本 clipboard
之前写的复制功能发现用微信打开的浏览器页面不生效,所以又换了种方法实现 首先,安装 clipboard npm install clipboard --save 然后,引入 clipboard imp ...
- 利用clipboardJs 点击按钮复制文本
官网:https://clipboardjs.com/ 1. npm install clipboard --save 2. 引入 import ClipboardJS from 'clipboar ...
最新文章
- signature=2ee20a16234208d4dd8bbd7fe87bb472,sstk-20200428
- Java 注解 Annotation
- 好用的vp n推荐2020_哪个牌子的沐浴露好,2020年最新沐浴露选购测评,好用好闻易清洗沐浴露品牌推荐...
- NC51189 Mondriaan‘s Dream
- C++学习之路 | PTA(甲级)—— 1114 Family Property (25分)(带注释)(并查集)(精简)
- java安卓如何实现定义接口
- JavaSE集合框架-01-集合框架体系及表数据结构
- 基于Java的汽车租赁系统
- SuperMap iDesktop / iDesktopX 加载大疆智图(DJI Terra)导出的OSGB数据效果异常的绕行方案
- async function
- pe下修复linux磁盘分区,找回丢失的Linux分区及Grub修复过程
- python-模块使用方法
- Linux系统下计算机C语言的编程技巧
- ip地址配置 mongodb_【已解决】给MongoDB限制IP访问
- 还在跑遍武汉追樱花,这份武汉赏樱地图送给你
- 远程关机和重启电脑的cmd命令
- 段永平“徒孙”沈义人:30岁当OPPO副总裁,取代刘强东成宿迁之光
- 微信开发详解scope---snsapi_base和snaspi_userinfo 区别
- 为什么需要运营商级NAT设备?
- python国内源下载地址亲测有效
热门文章
- 2021年4月-(计算机网络)小型校园网络模拟搭建,最全最准确版!!!!!
- 软考 - 软件设计师 - 完整知识点笔记 - 按考频整理
- linux添加变色龙引导,变色龙引导下载
- 局域网弱口令扫描工具_“菜鸟黑客”必用兵器之“扫描篇”
- ruby所有版本下载地址
- 为Linux的ibus添加五笔98输入法
- mybatis批量操作(批量查询,批量插入,批量更新)
- [T-ARA][I'm so bad]
- QQ在线客服代码(绝对强制对话框)
- 【动画演示软件】Focusky教程 | 加入 配音/录音/字幕