zoukankan      html  css  js  c++  java
  • 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判断手机就行

  • 相关阅读:
    LVS负载均衡部署
    将源码包制作成rpm包
    root用户被提示:Operation not permitted
    varnish加速web
    优化nginx数据包头缓存
    NGINX并发量优化
    Python+API接口测试框架设计(pytest)
    python+API接口测试框架设计(unittest)
    python编程面试题
    Python + unittest知识点回顾
  • 原文地址:https://www.cnblogs.com/li-sir/p/10811876.html
Copyright © 2011-2022 走看看