<text selectable="true" user-select="true">{{content}}</text>
zbLiuLiu
- 发布：2023-10-25 00:49
- 更新：2023-10-25 00:49
- 阅读：213
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 版本 Windows 11 专业版 版本 22H2 操作系统版本 22621.2428 体验 Windows Feature Experience Pack 1000.22674.1000.0
HBuilderX类型： 正式
HBuilderX版本号： 3.8.12
浏览器平台： Safari
浏览器版本： 15.6.6
项目创建方式： HBuilderX
示例代码：
操作步骤：
在任意位置添加：
<text selectable="true" user-select="true">{{content}}</text>
在任意位置添加：
<text selectable="true" user-select="true">{{content}}</text>预期结果：
<text>组件内部的文本可以被选中。
<text>组件内部的文本可以被选中。
实际结果：
在Safari浏览器中，<text>组件内部的文本不可以被选中。
在Safari浏览器中，<text>组件内部的文本不可以被选中。
bug描述：
在生产环境（发行）下，发布为H5时最终导出的uni.css中，选择器为uni-text[selectable]的样式中缺少关于user-select属性-x-前缀的polyfill，造成在Safari浏览器中user-select属性失效（Safari浏览器不支持无-webkit-前缀的user-select属性，见MDN：user-select - CSS：层叠样式表 | MDN）。
但由于html,body中包含了一个-webkit-user-select:none，因此按照CSS的继承原理会造成<text>组件添加selectable属性后在Safari浏览器中仍无法选中里面的文本。
建议官方在选择器为uni-text[selectable]的样式中添加规则：-webkit-user-select:text。
开发者可用的临时解决方案：
在App.vue的style标签中添加如下代码，style标签不可加scope属性：
uni-text[selectable] {
-webkit-user-select: text;
}
0 个回复