移动端阻止用户长按，弹出保持文本，以及保存图片

最新推荐文章于 2024-05-23 15:08:56 发布

原创最新推荐文章于 2024-05-23 15:08:56 发布 · 5k 阅读

2 ·

CC 4.0 BY-SA版权

移动端专栏收录该内容

2 篇文章

订阅专栏

本文介绍两种CSS方案：一是使用user-select属性禁止文本被选中；二是通过touch-callout属性禁用移动端默认上下文菜单。

css样式上的俩种方案

1.不能被选择 user-select:none;

-webkit-user-select:none;

-ms-user-select:none;

-moz-user-select:none;

2.禁用系统默认菜单

touch-callout:none;

-webkit-touch-callout:none;

-ms-touch-callout:none;

-moz-touch-callout:none;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hyb_sir

关注关注

1
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uQrcode uniapp 微信小程序长按保存图片+转发

Wickedstepmother的博客

01-17

1457

uQrcodeLoading 和remake 在这里没用上。根据官方文档指引去插件市场安装uqrcode插件。

【APP移动端自动化测试】第四节.元素操作的API

未央的博客哟

06-14

1463

（1）应用场景需要点击某个按钮的时候使用（2）方法名#对element按钮进行点击操作（3）示例1.打开《设置》2.点击放大镜按钮（4）核心代码。

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

uniapp禁止微信浏览器长按出菜单-适用IOS（亲测可用）

liu_chenglong的博客

03-06

1762

uniapp禁止微信浏览器长按出菜单-适用IOS（亲测可用）vue 禁用长按图片弹出菜单vant/vue手机端长按事件以及禁止长按弹出菜单_vue 移动端按住两秒出现弹框禁止ios长按时触发系统的菜单,禁止ios&android长按时下载图片_禁用安卓,ios长按弹出菜单。目前官方未提供禁用API，可尝试使用空白浮层阻断长按事件。

安卓部分浏览器长按保存图片问题

qq_41293573的博客

04-08

1634

在安卓部分浏览器上长按查看base64图片一片空白，点击保存图片也提示保存失败，加入以下代码即可解决。 1.页面上创建一个canvas容器,设置其隐藏 <canvas v-show="false" ref="picture"></canvas> 2.使用canvas重新绘制并赋值 this.imgUrl = "data:image/jpeg;base64," + res.content.base64_image;//这个路径只能苹果保存 let img = new Ima

移动前端图片压缩 + Dom元素保存成图片

飞扬_柳絮的专栏

11-16

992

移动端压缩图片并且上传基本流程：　1、input file上传图片时，filereader读取上传的图片数据（base64格式）　2、将图片数据传入img对象，然后把img绘制到canvas上，调用canvas.toDataURL对图片进行压缩　3、获取到压缩后的base64格式图片数据，转成二进制塞入formdata，再上传上代码：<!DOCTYPE html> <html>

uniapp禁止h5长摁保存图片，pc禁止右键另存为

王佩健的博客

05-23

935

在APP.VUE里增加。

移动端禁止长按事件触发的复制粘贴

weixin_44476689的博客

04-17

2860

这里写自定义目录标题移动端禁止长按事件触发的复制粘贴 移动端禁止长按事件触发的复制粘贴页面中全部文字内容禁止长按复制的方法 CSS 写法 *{ -webkit-touch-callout:none; /系统默认菜单被禁用/ -webkit-user-select:none; /webkit浏览器/ -khtml-user-select:none; /早期浏览器/ -moz-user-sele...

长按二维码或者图片保存

05-12

当用户在屏幕上的二维码或图片上长按数秒，手机会弹出一个包含多个选项的浮动菜单，用户可以选择“保存图片”或“保存到相册”。在某些手机操作系统中，这个选项可能会有所不同，如被标记为“保存图像”等类似表述。...

禁用 H5 网页长按图片时弹出的菜单

最新发布

03-22

当用户长按图片时，特别是在移动端，通常会触发系统的默认菜单，比如保存图片或者识别二维码。要禁用这个行为，可能需要用到CSS或JavaScript的方法。然后，我想到CSS中的pointer-events属性。这个属性可以控制元素...

响应式作品展示HTML模板-适配移动端的图片列表源码

同时，源码对“移动端适配”的强调还体现在触摸操作的支持上，比如支持手势滑动切换图片、点击放大预览、长按保存等功能，极大优化了移动用户的交互体验。此外，该源码作为“网页模板”，具有高度的可复用性与可...

一文彻底解决HTML5页面中长按保存图片功能

12-13

本文详细介绍了如何在H5中实现长按保存图片的功能。长按保存图片是现在一些宣传页H5中很常见的需求，但是js没有这样的能力，所以要么借助android或ios的原生能力,要么用canvas自己画一个（截屏），相比较原生成本太高，且必须依赖于app，相对于流传性很广且跨平台的H5来说不合时宜，所以 canvas 成为我们常用的手段。下面是详细的步骤： 1. html2canvas截屏保存的图片节点最好是img标签：想要截屏的节点最好是img标签的图片，经测试如果是 background-image 会有点模糊，需要特别注意下。 npm i html2canvas --save impor

解决uniapp APP图片预览长按保存到相册的问题

qq_43211876的博客

10-18

3173

解决uniapp APP图片预览长按保存到相册的问题如果你的app图片无法在预览时保存到相册，那就试试我这个方法吧。 <view @tap="previewImage">打开预览</view> data() { return { images: [], //预览的图片列表 } }, onLoad(){ this.getImages() }, methods: { //获取图片列表 getImages(){ //在这里调接

app内嵌H5，禁止图片长按保存。

luojingonline的博客

07-30

3596

一、第一种方法： img{ pointer-events:none; } 缺点：会禁止掉点击事件。二、第二种方法： img{ user-select:none; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; } 三、第三种方法： img统一用background实现。四、第四种方法: img上面...

h5 ios 禁用长按选择图片_h5移动端禁止长按图片保存

weixin_39606003的博客

12-23

6526

在移动端访问H5页面的时候，长按图片就会把图片保存起来，为了能够让用户体验更好一些，我们需要长按的时候也不保存图片。那该如何实现呢？下面给出3种解决方案。方案一：使用 pointer-events:noneimg{pointer-events:none;}亲测有效，适用于微信客户端的手机页面，图片被打开的情况.方案二：全局属性*{-webkit-touch-callout: none;-webki...

取消手机端页面长按图片出现保存或者图片被打开的方法

葬爱家族王富贵

05-28

8701

荆轲刺秦王如题描述：长按移动端页面图片会出现收藏或保存图片提醒，还有微信手机端页面会出现打开图片的情况，下面说一下如何取消这种情况。1.使用 pointer-events:none给 img 标签加样式：img{pointer-events:none}亲测有效，适用于微信客户端的手机页面，图片被打开的情况2.加全局样式 *{ -webkit-touch-ca...

html5移动端实现禁止长按图片保存:

SunPeng的博客

10-31

1977

html5移动端实现禁止长按图片保存:

解决uniapp h5端IOS在微信里面长按图片无法保存的问题

qq_25691983的博客

05-25

989

然后image的src请求这个地址即可。

禁止网页另存为右键，左键等

小半的博客

05-13

616

禁止网页另存为右键，左键等禁止另存为， <body></body> 标签里面写入 <noscript><iframe src='*.htm'></iframe></noscript> 禁止右键 <script> document.oncontextmenu =...

uni-app长按触发事件