mui 點選長按複製文字

多毛大叔愛蘿莉發表於2018-10-22
UI

專案需要長按複製文字內容，由於也沒仔細研究過 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('複製成功')
            }
        }
    })
})
複製程式碼
我參考了QQ空間複製、網易雲音樂評論複製。發現都是直接複製全部文字，並不是選擇的，所以這樣子完全符合現在主流需求。

使用起來也很簡單 在需要用到複製的頁面 引入上邊的js檔案，在把需要複製的元素上新增class。

相關文章