博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
手机端取消长按选中
阅读量:6934 次
发布时间:2019-06-27

本文共 1304 字,大约阅读时间需要 4 分钟。

企业号有一种消息类型叫保密消息,该类型消息有全屏水印、图片水印、禁止分享至朋友圈、禁止选中文字等功能。

但是对于图片,手机端默认长按时会触发下载保存交互。

/*-webkit-touch-callout:none; /!* 禁用长触弹出的下载图片菜单 *!/*/

-webkit-user-select:none; /* 禁用长触选择文字等功能 */

首先想到的方案是通过JS实现,对touch实践做处理。

1
window.ontouchstart =
function
(e) { e.preventDefault(); };

但是这个对于长的文章,滚动事件就失效了。所以此方案无效,但是如果只是某个div有需求,可以这样处理。

其实这个可以通过CSS3的属性去除。

1
img { pointer-events:
none
; }

如果只是对图片禁止选中,长按图片的时候不会有问题,但是如果是先选择旁边的文字,再覆盖选取图片,那图片照样会被copy出来。

禁止选中

1
2
-webkit-user-select:
none
;
/*禁用手机浏览器的用户选择功能 */
-moz-user-select:
none
;

这时候对文字禁止选中就没有问题了,整篇文章不可以复制或保存。截屏的时候会带有水印。

还有一招更甚,直接

1
*{ pointer-events:
none
; }

完美实现以上需求,完成。

企业号有一种消息类型叫保密消息,该类型消息有全屏水印、图片水印、禁止分享至朋友圈、禁止选中文字等功能。

但是对于图片,手机端默认长按时会触发下载保存交互。

首先想到的方案是通过JS实现,对touch实践做处理。

1
window.ontouchstart =
function
(e) { e.preventDefault(); };

但是这个对于长的文章,滚动事件就失效了。所以此方案无效,但是如果只是某个div有需求,可以这样处理。

其实这个可以通过CSS3的属性去除。

1
img { pointer-events:
none
; }

如果只是对图片禁止选中,长按图片的时候不会有问题,但是如果是先选择旁边的文字,再覆盖选取图片,那图片照样会被copy出来。

禁止选中

1
2
-webkit-user-select:
none
;
/*禁用手机浏览器的用户选择功能 */
-moz-user-select:
none
;

这时候对文字禁止选中就没有问题了,整篇文章不可以复制或保存。截屏的时候会带有水印。

还有一招更甚,直接

1
*{ pointer-events:
none
; }

完美实现以上需求,完成。

禁止点击高亮选中:

-webkit-tap-highlight-color: rgba(0,0,0,0);  

-webkit-tap-highlight-color: transparent; /* For some Androids,个人感觉是低版本的安卓,4.0以下 */    

转载于:https://www.cnblogs.com/cench/p/5833961.html

你可能感兴趣的文章
javascript的正则表达式
查看>>
zabbix3.2.6.1升级3.4.4图文心得
查看>>
PL/SQL子程序
查看>>
Unix/Linux shell脚本中 “set -e” 的作用
查看>>
802.1x------2
查看>>
如何实现1像素的表格
查看>>
Namenode主备切换或报 IPC Server handler 23 on 8020
查看>>
从“上云”到“云管理”,中国首个多云管理平台评估标准有何妙处
查看>>
路由协议OSPF知识点汇总
查看>>
如何定制视频业务- ramdisk 内存文件系统
查看>>
git
查看>>
SHELL简单脚本编写
查看>>
CrazyWing:Python自动化运维开发实战 六、流程控制
查看>>
tomcat上传war包失败
查看>>
网页禁止行为的总结
查看>>
使用ISAPI_Rewrite做实用的重定向
查看>>
3.6 迁移故障恢复
查看>>
DTS增量/同步支持DDL迁移的说明
查看>>
java mp3播放器 无界面
查看>>
VII python面向对象
查看>>