mui 点击长按复制文本
项目需要长按复制文本内容,由于也没仔细研究过 mui 所以就直接百度。
看到了 花落乱了流年 这篇博客 我就把这个博客的代码融合到自己的项目里,实现了复制的需求
直接上代码
单独写到了一个 js 文件。首先把 长按事件 激活,因为默认是关闭的。我在里边添加了确认框,可以做到提醒用户的作用。在复制成功后边又有消息提醒。代码如下
// 激活长按按钮
mui.init({
gestureConfig: {
longtap: true, //默认为false
}
}); // 使用mui的长按事件 我把我的复制元素 class 设置为copy-text
mui('body').on('longtap', '.copy-text', function () {
// 每次触发事件就会使用 innerText 获取纯文本。
var copy_content = this.innerText;
// 加了一个确认框 让用户选择是否复制
mui.confirm('您要复制内容吗?', '小禾CRM', ['取消', '复制内容'], function (e) {
if (e.index == 1) {
//判断是安卓还是ios
if (mui.os.ios) {
// ios 的方法 这个我没具体研究过 直接拿来用了
var UIPasteboard = plus.ios.importClass("UIPasteboard");
var generalPasteboard = UIPasteboard.generalPasteboard();
//设置 复制的内容也就是 触发事件 innerText 获取的内容
generalPasteboard.plusCallMethod({
setValue: copy_content,
forPasteboardType: "public.utf8-plain-text"
});
generalPasteboard.plusCallMethod({
valueForPasteboardType: "public.utf8-plain-text"
});
// 在上边都走完 给用户一个提示
mui.toast('复制成功')
} else {
//安卓 的方法 这个我没具体研究过 直接拿来用了
var context = plus.android.importClass("android.content.Context");
var main = plus.android.runtimeMainActivity();
var clip = main.getSystemService(context.CLIPBOARD_SERVICE);
plus.android.invoke(clip, "setText", copy_content);
// 在上边都走完 给用户一个提示
mui.toast('复制成功')
}
}
})
})
也可以去掉长按或者改成点击把长按复制关闭即可

不需要确认框时也可以直接去掉,只保留if判断手机就行
mui 点击长按复制文本的更多相关文章
- ios label 简单的长按复制文本信息
在iOS开发过程中,有时候会用到UILabel展示的内容,那么就设计到点击UILabel复制它上面展示的内容的功能,也就是Label长按复制功能.网上有很多种给Label添加长按复制功能的方法,这里我 ...
- ios html5 长按复制文本
以前做的项目,主要是针对ios的,安卓上面也没有测试. 原理其实是系统自带的功能,那时候借鉴的其他网站,没有试验通过document.execCommand("Copy"),别的j ...
- Wx-小程序-长按复制文本
view: <text bindlongtap='copy' data-name='{{name}}'>{{item.name}}</text> js: copy(e) { v ...
- 【咸鱼教程】Egret中可长按复制的文本(例如复制优惠码)
一 实际效果二 实现原理三 源码下载 在egret中实现长按复制文本效果,一般用于复制优惠码什么的. 一 实际效果 二 实现原理 在egret的游戏元素都是绘制在canvas上的,我们 ...
- 原生 js 实现点击按钮复制文本
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- js 实现点击复制文本内容
js 实现点击复制文本内容 <table> <tr><td>姓名:<span onclick="copyContent(this);" ...
- Vue实现点击复制文本内容(原生JS实现)
需求: 实现点击订单编号复制内容 实现步骤: 这里我是在element 的table组件里实现的步骤,仅供参考,实际上实现思路都大同小异 首先在需要点击的地方,添加点击事件 <div class ...
- js实现点击按钮复制文本功能
最近项目活动中用到复制文本功能,发现在chrome中之前的clipboard的demo失效了,查了下发现是因为版本升级导致的.最新用法如下: <!DOCTYPE html> <htm ...
- 【转】TextView长按复制实现方法小结
有这么一个需求,用户在浏览文本信息时希望长按信息就能弹出复制的选项方便保存或者在别的页面使用这些信息.类似的, 就像长按WebView或者EditText的内容就自动弹出复制选项. 这里面主要是2个特 ...
随机推荐
- Java基础之(四)HashMap(jdk10)
JDK1.7以前的HashMap jdk1.7中,当冲突时,在冲突的地址上生成一个链表,将冲突的元素的key,通过equals进行比较,相同即覆盖,不同则添加到链表上,此时如果链表过长,效率就会大大降 ...
- 阅读笔记——《How a Facebook rejection pushed me to start and grow a profitable business in 12 months》
阅读笔记——<How a Facebook rejection pushed me to start and grow a profitable business in 12 months> ...
- subprocess.popen.kill杀死所有子进程
一.使用subprocess模块 使用subprocess模块可创建子进程. subprocess. Popen ( args , bufsize=0 , executable=None , stdi ...
- idea 中激活 JRebel
JRebel介绍: JRebel是一款JVM插件,它使得Java代码修改后不用重启系统,立即生效.IDEA上原生是不支持热部署的,一般更新了 Java 文件后要手动重启 Tomcat 服务器,修改才能 ...
- 全栈项目|小书架|服务器开发-Koa2 连接MySQL数据库(Navicat+XAMPP)
为什么使用数据库 为什么需要数据库?-知乎 相比与文件系统,数据库具有以下优势: 高效率:查找效率高 高可用:可数据库共享 安全性强:数据不能随意修改 选择哪个数据库 数据库可以分为关系型数据库和非关 ...
- SpringBoot 多数据库支持:
SpringBoot 多数据库支持: springboot2.0+mybatis多数据源集成 https://www.cnblogs.com/cdblogs/p/9275883.html Spring ...
- C#连接数据库不安装Oracle客户端
Oracle提供了这样的Oracle.ManagedDataAccess.dll,让用可以需要安装Oracle客户端即可连接数据库,并且不区分32位和64位. 1.引用 选择引用,找到对应文件目录下的 ...
- Windows Server 2012 R2安装部署Office Web Apps Server
微软官方参考地址https://technet.microsoft.com/zh-cn/library/jj219455.aspx,建议参考官方说明. 注意:每一步进行完成后重启服务器!!! 一. ...
- 【转载】 C#使用string.IsNullOrWhiteSpace方法判断字符串是否为非空字符
在C#编程过程中,很多时候需要判断传入过来的字符串是否为Null或者空字符或者空白字符,此时就可以使用到string.IsNullOrWhiteSpace方法来判断,如果字符串为null或者空字符Em ...
- SIM7500 SIM7600 SIM800 HTTP
解释 //Start HTTP service AT+HTTPINIT //Stop HTTP service AT+HTTPTERM //Set HTTP Parameters value /* & ...