I'm Sham
一个在通往码农道路上走走停停的行政文员

小程序复制文本功能

今天给小程序增加了复制文本功能,因为sham用到了text,rich-text和wxprase插件,所以复制文本也用到了2种方法来实现。

方法一

这个比较简单,就是如果你用的是text标签的话,只需要添加selectable=’true’就可以实现自定义复制了

<text selectable='true'>这里面的文字,用户长按,就会显示选择字符的区域和复制按钮,复制即可</text>

方法二

如果你用了rich-text或者wxprase等解析html的话,可以通过添加长按时间来复制你设置的内容:js部分

//长按复制
  copy: function (e) {
    var that = this;
    var text = e.currentTarget.dataset.text;
    var texts = text.replace(/<[^>]+>/g, "");  //删除html标签
    console.log(e);
    wx.setClipboardData({
      data: texts.replace(/&nbsp;/ig, ""),    //删除html的空格标签
      success: function (res) {
        // wx.hideToast();    //打开可不显示提示框
        wx.getClipboardData({
          success(res) {
            console.log(res.data) // data
          }
        })
      }
    });
  },

wxml部分,分为rich-text和wxprase2个

<rich-text nodes="{{content}}" bindlongpress="copy" data-text="{{content}}" selectable='true'></rich-text>

<view class="content" bindlongpress="copy" data-text="{{content}}" >     
   <template is="wxParse" data="{{wxParseData:content.nodes}}"/>
</view>

这个的话,是复制的content对应的内容,用户不能自己选择;

赞(0) 赏杯咖啡!
未经允许不得转载:Sham@双目瞿 » 小程序复制文本功能

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

如果你觉得文章好,请赏1杯速溶咖啡给Sham吧!

微信扫一扫打赏