解决小程序ios部分机型无法长按复制问题

瘦瘦瘦大人

已于 2024-11-12 10:58:45 修改

阅读量2.4k

点赞数 3

分类专栏：前端HTML+CSS 文章标签： html5 小程序 css

于 2020-11-03 09:45:46 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37380802/article/details/109462384

版权

前端HTML+CSS 专栏收录该内容

4 篇文章

订阅专栏

1、可复制的内容必须用text 标签，然后添加selectable='true’和user-select=‘true’
2、必须父元素加个-webkit-user-select:text;才有效，单独子元素即使加-webkit-user-select:text!important也无效

 <view class='explain' style="user-select:text !important;-webkit-user-select" bindtap="bindPreviewTextHide" data-text="{{item.content}}">
 <text selectable='true' user-select='true' >{{item.content}}</text>
 </view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

瘦瘦瘦大人

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

uni-app - 手机端实现用户长按文本提示选取复制功能

王二红

03-10

1万+

手机端实现用户长按文本提示选取复制功能需求：用户手指长按文本区域，弹出手机系统复制功能。有时，安卓或苹果用户会有复制文本的需求，但是uni-app编译后组件是无法长按选取复制的。实现最简单的方式，就是将<text>标签selectable属性设置为true，演示如下： <textselectable="true">这是一个可以长按选择文本，弹出复制的text标签</tex...

实战解决小程序图片加载问题

热门推荐

夏尔的小酒馆

10-11

4万+

相较于web端或者H5开发，小程序本身在性能上弱很多（但用户体验上要好）。以前开发时服务器性能过剩在那里帮你撑着脸面，你对自己的代码质量和编程习惯心里没数，小程序就是一面镜子。废话少说，要解决的问题是，小程序加载图片闪烁，渐渐出现，出现的很慢等等效果不尽人意的体验。如果你的小程序本身只用加载很少的图片，那么其实问题不大。如果是像购物APP那样或者是一款有图片列表的应用，那么以下方案肯定能帮到你...

2 条评论您还未登录，请先登录后发表或查看评论

解决微信小程序IOS部分机型无法复制文字的问题？

qq_39077394的博客

07-20

4959

微信小程序内想要实现长按复制文字的功能需要在text标签上添加可复制的属性selectable=“true” <text selectable="{{true}}">{{item.text}}</text> 按照上面的添加完，安卓长按可正常复制，测试了一下iPhone6((ios13.2)可以复制，但是iPhone6(ios13.6) ，iPhone 11(ios13.4.1)无法复制，还有其他部分ios机型无法复制。解决方法： text标签添加属性 user-select=“t

小程序中长按文字可进行复制

weixin_45389051的博客

03-19

944

【代码】小程序中长按文字可进行复制。

H5怎么禁用长按复制的功能？

github_39427902的博客

03-01

1652

H5怎么禁用长按复制的功能？

微信小程序对苹果（ipone）手机不能选择复制的问题解决方法

wsy296717574的博客

03-01

2479

** 1、可复制的内容必须用text 标签， 2、在标签中添加selectable='true’和user-select=‘true’ <view > <view>文本</view>  <text selectable user-select>{{detail}}</text> </view> 然后

个别手机在微信内无法长按识别二维码

小毛驴的博客

04-24

2193

1.问题: 在微信中打开H5页面，页面中有一个二维码，长按识二维码关注公众号在大部分手机都是可以实现的，但是目前发现在华为一些型号和iphone11中长按会提示保存图片，而不是识别. 2.原因 google了很久也没有发现原因，猜想可能是微信的原因 3. 解决方法提供以下几种方法，我试了前几中不好用，最后一种可行扩大二维码的图片大小，160*160最合适（不行）二维码图片放在项目的静态...

【Telegram Bot Mini Apps小程序】

weixin_43364031的博客

12-21

1522

电报小程序的开发记录

微信小程序测试方案

测试架构师养成记的博客

05-19

7796

小程序架构 小程序主要分为两个主要的部分：view模块和service模块。view模块负责UI展示，它由wxml和wxss转换后的代码以及微信提供的辅助模块组成。一个view模块对应一个webview组件，小程序支持多个view存在，view模块通过微信jsbridge对象来跟后台通信。 小程序类型 小程序主要分为三个版本类型：开发版、体验版、正式版。开发板和体验版无需审核，需要给微信号配置权...

ios的webview下input点击多次才会出现软键盘

小毛驴的博客

05-06

2352

在webview中有input框，在Android下是有效的，在pc中也是好的，但是在ios中需要点击多次或者长按才会弹出软键盘。探索原因，可能与fastclick有关，以及与ios的版本有关 1.fastClick是什么？先来看fastClick解决了什么问题： click 300ms延迟：浏览器click会比touch延迟300ms触发 click穿透现象：当两个div同处一个posit...

飞书页面禁止复制问题

qq_25687271的博客

08-12

2万+

飞书里面的小程序，禁止复制需要在我们的项目的页面的css文件里面添加两行代码 { cursor: pointer; // 适用于PC端 user-select: text; // 使用于移动端，长按复制 }

微信小程序-富文本解析插件wxParse基础使用及问题解决

w36680130的博客

09-04

422

微信小程序-富文本解析插件wxParse基础使用及问题解决

html5+CSS 禁止IOS长按复制粘贴实现

tianyitianyi1的专栏

05-31

1543

因为在移动端APP需要实现长按执行别的事件，但是在iOS系统有默认的长按选择复制粘贴，禁止此功能在网上找了很多资料，最终整理出目前最好的解决方法。项目是APP，已经经过多款手机适配此时，因此可以放心使用。 /*设置IOS页面长按不可复制粘贴，但是IOS上出现input、textarea不能输入，因此将使用-webkit-user-select:auto;*/ *{ -

css的一些细节

weixin_30952103的博客

05-08

115

1、中文符号居中效果对于动态输出文字可以不用在意，某些页面可能会有类似提示文案的地方，用英文标点符号，对于居中效果比较友好。2、元素的上下间距布局的时候从上往下开始写页面，一般都是写下一个的元素margin-top来决定和上一个元素的间距，那么就尽量不要又是写margin-top又是写margin-bottom，如果混着用，后期不好维护，比如某一块区域需要摞位置，或者是一个...

移动端长按文本选择复制

乔的博客

03-01

2669

css: -webkit-user-select: none;可以限制长按复制兼容性：设置或检索是否允许用户选中文本。 IE6-9不支持该属性，但支持使用标签属性 onselectstart=”return false;” 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的...

微信小程序 selectable={true}在ios上无效解决

前端开发一枚

11-30

2937

官方回答将selectable 替换为user-select <Text className='dec-text' user-select={true} onLongPress={() => { handleLongPress('text', data.rewardDesc); }} ..

uniapp：微信小程序文本长按无法出现复制菜单

q1003675852的博客

12-30

1298

本文主要解决“uniapp：微信小程序文本长按无法出现复制菜单”的问题

html5屏蔽ios长按复制,html5+CSS 实现禁止IOS长按复制粘贴功能

weixin_33410914的博客

06-05

633

html5+CSS 实现禁止IOS长按复制粘贴功能因为在移动端APP需要实现长按执行别的事件，但是在iOS系统有默认的长按选择复制粘贴，禁止此功能在网上找了很多资料，最终整理出目前最好的解决方法。项目是APP，已经经过多款手机适配此时，因此可以放心使用。/*设置IOS页面长按不可复制粘贴，但是IOS上出现input、textarea不能输入，因此将使用-webkit-user-select:aut...

html手机页面怎么长按不出复制,HTML -----对于手机页面长按会粘贴复制的禁用

weixin_39536806的博客

06-03

413

有的时候我们想要去掉手机页面长按会粘贴复制的禁用解决方案：直接在CSS 文件中添加下面的代码，就可以实现了在手机端禁止粘贴复制的功能：*{-webkit-touch-callout:none; /*系统默认菜单被禁用*/-webkit-user-select:none; /*webkit浏览器*/-khtml-user-select:none; /*早期浏览器*/-moz-user-select:...

微信小程序监听分享回调

最新发布

03-04

<think>好的，我现在需要帮用户解答关于微信小程序监听分享回调的问题。首先，我得回忆一下微信小程序的分享功能相关文档。记得微信小程序的分享主要有两种方式：页面内分享和自定义按钮分享。用户可能想知道如何监听用户点击分享后的回调，比如是否成功分享或者取消分享。接下来，我需要确定微信小程序是否支持监听分享后的回调。根据之前的经验，微信的API中有onShareAppMessage这个生命周期函数，它用于设置分享内容，但不确定是否有直接的回调可以监听分享结果。可能需要查阅最新的文档确认。查资料发现，从基础库版本2.11.3开始，onShareAppMessage支持返回Promise，这样可以通过resolve和reject来处理分享成功或失败的情况。不过，微信的分享到朋友圈和分享到好友的API可能有所不同，特别是分享到朋友圈使用的是wx.updateShareMenu，而好友分享用的是button的open-type=share或者调用wx.showShareMenu。用户可能想知道如何监听用户是否执行了分享操作，比如点击了发送给朋友或者取消。这时候需要明确，微信小程序的分享到好友的按钮点击后，如果用户成功发送，会触发success回调，而取消会触发fail回调。但是，如果是用户点击右上角菜单的分享，可能无法直接捕获取消操作，因为微信并没有提供相应的回调。另外，分享到朋友圈的情况，因为朋友圈分享需要用户手动长按二维码识别，所以可能无法直接监听是否成功，只能监测用户是否触发了分享菜单。但具体的回调可能需要通过wx.updateShareMenu的参数来处理。然后，我需要整理这些信息，用简洁明了的步骤告诉用户如何实现监听分享回调。可能需要分情况讨论：使用按钮分享和右上角菜单分享的不同处理方式，以及不同基础库版本的支持情况。需要注意的是，微信的API可能会有版本差异，提醒用户检查基础库版本，并处理兼容性问题。例如，使用Promise需要确保基础库版本足够高，否则需要做降级处理。最后，可能需要提供一个代码示例，展示如何在onShareAppMessage中使用Promise，或者在按钮的bindtap事件中处理分享后的回调。同时，指出无法监听取消分享的情况，避免用户误解。总结步骤： 1. 介绍微信小程序的两种分享方式。 2. 分别说明如何监听这两种分享的回调。 3. 提供代码示例，包括使用Promise处理分享成功和失败。 4. 提醒兼容性问题和无法监听的情况。</think>在微信小程序中监听分享回调主要通过以下方式实现： $$ \text{分享类型} = \begin{cases} \text{右上角菜单分享} & \text{(需设置onShareAppMessage)} \\ \text{自定义按钮分享} & \text{(通过button组件触发)} \end{cases} $$ 一、基础配置方法： 1. 页面配置分享 ```javascript Page({ onShareAppMessage() { return { title: '自定义标题', path: '/pages/index/index', imageUrl: '/images/share.jpg' } } }) ``` 二、监听分享回调（基础库2.11.3+）： ```javascript onShareAppMessage() { return { title: '分享标题', promise: new Promise((resolve, reject) => { // 分享成功时 wx.showShareMenu({ success: () => resolve(), fail: () => reject() }) }) } } ``` 三、自定义按钮监听： ```html <button open-type="share" bindtap="onShareTap"> 点击分享 </button> ``` ```javascript Page({ onShareAppMessage() { return { /* 分享配置 */ } }, onShareTap() { wx.showShareMenu({ success: () => console.log('调起分享菜单'), fail: (err) => console.log('失败', err) }) } }) ``` 特殊注意事项： 1. 实际只能监听菜单调起状态，无法准确获取最终分享结果 2. 安卓/iOS系统差异：部分机型可能无法获取取消操作回调 3. 兼容性要求：基础库需2.11.3以上版本支持Promise形式 4. 朋友圈分享需单独处理： ```javascript wx.updateShareMenu({ withShareTicket: true, activityId: '', // 活动ID success: () => console.log('朋友圈分享配置成功') }) ``` 建议配合使用全局事件监听（如页面onShow生命周期）来检测用户是否返回小程序，间接判断可能发生的分享行为。