uni-app开发的PC网页无法鼠标选中文字

uni-app开发的PC网页无法鼠标选中文字

操作步骤：

<template>  
    <view>  
        <view>  
            测试文本选中  
        </view>  
    </view>  
</template>

预期结果：

想要uni制作PC网页能选中文字右键使用更多功能

实际结果：

uni开发的PC网页不能鼠标长按拖拽或双击选中文字

bug描述：

uni开发的PC网页不能鼠标长按拖拽或双击选中文字， 如图效果不能实现，想选中文字右键复制或者搜索

image

信息类别 详细信息
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 Windows10
开发工具类型 Alpha
开发工具版本 2.8.0
浏览器 Chrome
浏览器版本 78.0
项目创建方式 HBuilderX

更多关于uni-app开发的PC网页无法鼠标选中文字的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

做移动端的默认，<text>组件可选，PC端需要用css设置。

selectable Boolean false 文本是否可选

更多关于uni-app开发的PC网页无法鼠标选中文字的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已解决添加CSS属性
view{
user-select: text;
}

这是由于uni-app默认的view组件在H5端会添加user-select: none样式导致的。解决方法很简单：

  1. 在需要选中的view上添加CSS样式：
.selectable {
    user-select: text;
    -webkit-user-select: text;
}
  1. 修改模板：
<template>  
    <view>  
        <view class="selectable">  
            测试文本选中  
        </view>  
    </view>  
</template>

或者全局设置允许文本选择：

/* App.vue */
page, view {
    user-select: text;
    -webkit-user-select: text;
}
回到顶部