uni-app ios14,15 长按事件会触发文本的自动选中文字

uni-app ios14,15 长按事件会触发文本的自动选中文字

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 10
HBuilderX Alpha
HBuilderX版本 3.2.10
手机系统 iOS
手机版本 iOS 15
手机厂商 苹果
手机机型 xs,13pro
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>
<view class="kefu_popup">
<view style="user-select: text">text设置</view>
<view style="padding-top: 50px;" @longpress.stop="longpress">
longpress长按事件
</view>
</view>
</template>  
<script>
export default {
data() {
return {}
},
methods: {
longpress(e) {
uni.showActionSheet({
itemList: ['A', 'B', 'C'],
success: function(res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
},
fail: function(res) {
console.log(res.errMsg);
}
});
}
},
}
</script>

操作步骤：

触发长按事件后，页面的文本会自动选取

预期结果：

触发长按事件后，页面的文本会不会选取

实际结果：

触发长按事件后，页面的文本会自动选取

示例图片1 示例图片2


更多关于uni-app ios14,15 长按事件会触发文本的自动选中文字的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app ios14,15 长按事件会触发文本的自动选中文字的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 iOS 14 及 15 系统中，longpress 事件触发时确实会伴随系统默认的文本选择行为。这是由于 iOS WebView 的默认行为导致的，尤其是在包含文本的元素上长按时。

要解决这个问题，可以通过 CSS 属性 user-select: none 来禁止文本选择。但需要注意，在 uni-app 中，部分元素可能需要额外处理。

解决方案：

  1. 全局或局部禁用文本选择
    在 App.vue 或对应页面的样式中添加：

    /* 全局禁用 */
page {
  -webkit-user-select: none;
  user-select: none;
}
/* 或局部禁用 */
.kefu_popup {
  -webkit-user-select: none;
  user-select: none;
}

  2. 针对需要文本选择的元素单独启用
    如果部分元素仍需文本选择功能，可以单独设置：

    <view style="user-select: text;">可选中文本</view>

  3. 在长按事件中阻止默认行为
    虽然 @longpress.stop 已阻止事件冒泡，但 iOS 的文本选择是默认行为，需通过 CSS 控制。若仍需通过事件处理，可尝试：

    longpress(e) {
  // 可尝试阻止默认行为（但CSS方案更可靠）
  e.preventDefault && e.preventDefault();
  uni.showActionSheet({ ... });
}
回到顶部