微信小程序text中文字的复制功能
方法一:在小程序页面中可以手动选择文本复制
<text selectable="true">{{texts}}</text>
如图:
注:加上这个之后在微信开发者工具上可能不能很好的复制,只能复制几个字,真机扫码调试在手机上可以长按选择复制
方法二:一键复制按钮
直接在某个地方(文本、按钮、图片等都行)绑定个点击事件bindtap="copyBtn"
把你需要复制的内容传到后台去data-ordernum="{{需要复制的内容}}"
<!-- .wxml -->
<text class='copy-btn' data-ordernum="{{item.orderNumber}}" bindtap='copyBtn'> 复制</text>
然后在 .js 文件中写方法:如下
data:写你需要复制的内容
data: e.currentTarget.dataset.ordernum
// 一键复制事件
copyBtn: function(e) {
wx.setClipboardData({
data: e.currentTarget.dataset.ordernum,
success: function(res) {
wx.showToast({
title: '复制成功',
});
}
})
}
网页中文字的复制
做网页的时候,有些文字我们需要能被选中,有些我们不要能被选中,那么这就需要用到一个css属性了,那就是 user-select:
user-select: none|auto|text|contain|all;
/*firefox浏览器*/
-moz-user-select: none|text|all;
/*safari、chrome浏览器*/
-webkit-user-select: none|text|all; /*Safari中不支持该属性值,只能使用none或者text,或者是在html的标签属性中使用*/
/*ie浏览器*/
-ms-user-select: none|text|element;
属性值:
none : 元素和子元素的文本将无法被选中
text : 文本可以被选中
auto : 文本将根据浏览器的默认属性进行选择
all : 当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素
contain、element : 可以选择文本,但选择范围受元素边界的约束,也就是选择的文本将包含在该元素的范围内。只支持Internet Explorer
注意:
浏览器实现之间的区别之一是继承。在Firefox中,-moz-user-select不是由绝对定位的元素继承的,但在Safari和Chrome中,-webkit-user-select却是由绝对定位的元素继承而来的。
user-select的属性详情: