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

最新推荐文章于 2024-08-03 06:35:50 发布
最新推荐文章于 2024-08-03 06:35:50 发布
阅读量4.9k 收藏 2
点赞数 1
分类专栏： 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39831708/article/details/82732772
版权

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;

 

hyb_sir
关注
专栏目录
移动端开发注意的事宜
weixin_44465584的博客
03-16 4818
1.什么是移动端开发？以及开发的工具？有哪些方式？ 移动开发也称为手机开发，或叫做移动互联网开发。是指以手机、PDA、UMPC等便携终端为基础，进行相应的开发工作，由于这些随身设备基本都采用无线上网的方式，因此，业内也称作为无线开发。 移动应用开发是为小型、无线计算设备编写软件的流程和程序的集合，像智能手机或者平板电脑。移动应用开发类似于Web应用开发，起源于更为传统的软件开发。但关键的不同在于移...
H5移动端常见问题
happy任的博客
04-13 2303
h5 常见问题 1. H5 页面窗口自动调整到设备宽度，并禁止用户缩放页面 一、HTML 页面结构 // width 设置 viewport 宽度，为一个正整数，或字符串 'device-width' // height 设置 viewport 高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 // mi...
长按二维码或者图片保存
05-12
长按二维码或者图片保存 下载可以直接用
触屏手机端阻止长按弹出选择文字以及弹出菜单，img标签同理
hangGe0111的博客
08-09 3883
1.主要代码 （1）css /*触屏手机端阻止长按弹出选择文字以及弹出菜单*/ *{ /*阻止文本选中*/ -webkit-user-select: none; user-select: none; /*阻止菜单弹出*/ -webkit-touch-callout: none; /*touch-callout去掉，安卓不支持须通过js里的阻止默认事件实现*/ ...
一文彻底解决HTML5页面中长按保存图片功能
12-13
本文详细介绍了如何在H5中实现长按保存图片的功能。 长按保存图片是现在一些宣传页H5中很常见的需求，但是js没有这样的能力，所以要么借助android或ios的原生能力,要么用canvas自己画一个（截屏），相比较原生成本太高，且必须依赖于app，相对于流传性很广且跨平台的H5来说不合时宜，所以 canvas 成为我们常用的手段。 下面是详细的步骤： 1. html2canvas截屏 保存的图片节点最好是img标签： 想要截屏的节点最好是img标签的图片，经测试如果是 background-image 会有点模糊，需要特别注意下。 npm i html2canvas --save impor
uniapp禁止微信浏览器长按出菜单-适用IOS（亲测可用）
liu_chenglong的博客
03-06 1096
uniapp禁止微信浏览器长按出菜单-适用IOS（亲测可用）vue 禁用长按图片弹出菜单vant/vue手机端长按事件以及禁止长按弹出菜单_vue 移动端按住两秒出现弹框禁止ios长按时触发系统的菜单,禁止ios&android长按时下载图片_禁用安卓,ios长按弹出菜单。目前官方未提供禁用API，可尝试使用空白浮层阻断长按事件。
安卓部分浏览器长按保存图片问题
qq_41293573的博客
04-08 1415
在安卓部分浏览器上长按查看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 936
移动端压缩图片并且上传基本流程： 　1、input file上传图片时，filereader读取上传的图片数据（base64格式） 　2、将图片数据传入img对象，然后把img绘制到canvas上，调用canvas.toDataURL对图片进行压缩 　3、获取到压缩后的base64格式图片数据，转成二进制塞入formdata，再上传 上代码：&lt;!DOCTYPE html&gt; &lt;html&gt;
uniapp禁止h5长摁保存图片，pc禁止右键另存为
王佩健的博客
05-23 483
在APP.VUE里增加。
(五)移动端测试
最新发布
jylee的博客
08-03 809
正确回答通过率：62.0%[ 详情 ] 推荐指数： ★★★★ 试题难度： 中级一、功能性功能性测试之安装：· 安装过程中是否可以取消· 软件安装后是否可以正常运行· 安装空间不足时是否有相应提示· 软件安装过程中意外情况（如死机，重启，断电）的处理是否符合需求· 安装后没有生成多余的目录结构和文件· 在必要的权限未选择后是否可以安装且后续可设置· 重复安装是否自动更新为当前安装版本功能性测试之卸载：· 是否可以通过桌面卸载或通过软件安装包卸载。
移动端 H5 开发指南 涉及html、css、js三大方向
愿你走过半生，归来任是少年。
04-17 687
与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。但本文记录的「40条坑位」绝对能让同学们少走很多弯路，特别是前端小白。
移动端禁止长按事件触发的复制粘贴
weixin_44476689的博客
04-17 2690
这里写自定义目录标题移动端禁止长按事件触发的复制粘贴 移动端禁止长按事件触发的复制粘贴 页面中全部文字内容禁止长按复制的方法 CSS 写法 *{ -webkit-touch-callout:none; /系统默认菜单被禁用/ -webkit-user-select:none; /webkit浏览器/ -khtml-user-select:none; /早期浏览器/ -moz-user-sele...
html 移动端关于长按图片弹出保存问题
weixin_33778544的博客
02-16 4511
在做html5项目的时候有个需求是要拖动一个图片，但是又不要用户长时间按着弹出保存框。首先想到的就是在点图片的时候阻止默认事件的发生： js停止冒泡· function myfn(e){ window.event? window.event.cancelBubble = true : e.stopPropagation(); } js阻止默认行为 function myfn(e){ w...
vue 生成海报，解决跨域问题 ，下载图片到本地
hflxia的博客
09-09 3958
// 获取图片元素 // 创建图片元素 var img = new Image(); //设置图片跨域 img.setAttribute("crossOrigin", "anonymous"); //设置图片路径 img.src = url; //下载图片 img.onload = function() { //创建画布 var can = document.createEleme...
页面禁止长按保存图片和长按复制文字
卜卦的博客
10-25 4255
1 禁止长按保存图片 img { pointer-events:none; // 禁止none ，启用auto } Tips：pointer-events属性详解： 官方文档：https://www.html.cn/book/css/properties/user-interface/pointer-events.htm 2 禁止复制文本 *{ -webkit-touch-callout:...
【web前端】20.手机端网页禁止长按图片保存图片
返璞归真
07-15 7760
最近做项目遇到一个问题，就是img图片长按会从底部弹出来保存图片的弹框，因为页面上不需要这个功能，所以产品要求去掉，解决这个问题，有两种方法： 1. 利用css img属性 img {pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;} 2. 设置背景图片 用div层的ba...
H5页面长按保存图片的功能
热门推荐
runafter888的博客
08-24 4万+
1.使用CSS属性 -webkit-touch-callout:default; 可以编辑使改元素长按可保存，但是注意着只是写入了 草案的一个属性。但是在实际使用中并没有发现问题 2. 在需要对元素垂直居中的时候可以使用 position:absolute; top:50%; tranform:translateY(-50%） 使用元素垂直居中，因为transfo
uniapp长按保存图片
09-15
在 UniApp 中，你可以通过以下步骤来实现长按保存图片： 1. 在页面中引入 `uni.saveImageToPhotosAlbum` 方法，该方法用于保存图片到相册。 2. 在需要长按保存图片的地方，添加一个图片标签，并为其绑定一个长按事件。 3. 在长按事件中，通过 `uni.saveImageToPhotosAlbum` 方法保存图片到相册。 下面是一个示例代码： ```html <template> <view> <!-- 图片标签 --> <image src="/static/image.jpg" @longpress="saveImage"></image> </view> </template> <script> export default { methods: { saveImage() { // 调用uni.saveImageToPhotosAlbum方法保存图片 uni.saveImageToPhotosAlbum({ filePath: '/static/image.jpg', success() { uni.showToast({ title: '保存成功', icon: 'success' }); }, fail() { uni.showToast({ title: '保存失败', icon: 'none' }); } }); } } }; </script> ``` 在上面的示例中，`/static/image.jpg` 是需要保存的图片路径。你可以根据实际情况替换为你自己的图片路径。当用户长按图片时，会调用 `saveImage` 方法，该方法内部调用 `uni.saveImageToPhotosAlbum` 方法来保存图片到相册。保存成功后，会显示一个成功的 Toast 提示；保存失败则显示一个失败的 Toast 提示。 需要注意的是，为了在 UniApp 中使用 `uni.saveImageToPhotosAlbum` 方法，你需要在 `manifest.json` 文件中的 `uni_modules` 配置中添加 `"name": "uni-save-image"`。 希望这个示例能帮到你！如果有任何问题，请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值