h5页面禁止复制_H5移动端页面禁止复制技巧

前言：业务需要，需要对整个页面禁止弹出复制菜单。

在禁止的页面中加入以下css样式定义

* {

-webkit-touch-callout:none;/*系统默认菜单被禁用*/

-webkit-user-select:none;/*webkit浏览器*/

-khtml-user-select:none;/*早起浏览器*/

-moz-user-select:none;/*火狐浏览器*/

-ms-user-select:none;/*IE浏览器*/

user-select:none;/*用户是否能够选中文本*/

}

还需加入以下JS

//PC端使右键和复制失效

document.oncontextmenu = new Function("event.returnValue=false");

document.onselectstart = new Function("event.returnValue=false");

//ios

document.oncontextmenu = function (e) {

e.preventDefault();

};

document.onselectstart = function (e) {

e.preventDefault();

};

//安卓

document.addEventListener('contextmenu', function (e) {

e.preventDefault();

});

document.ontouchend = function () {

throw new Error("NO ERRPR:禁止长按弹出");

}

实测 IOS禁止呼出复制菜单有效。但在安卓上还无法全部禁止。

安卓UC浏览器上还需加入以下代码,可以禁止长按呼出菜单:

安卓QQ浏览器暂时没有找到禁止呼出复制菜单的方法.

h5页面禁止复制_H5移动端页面禁止复制技巧相关推荐

h5获取安卓定位_H5 移动端获取当前位置
3种方法: 1.H5自带的方法,获取经纬度 2.通过地图提供的JS.获取位置 3.通过微信的API(这个需要公众号 / 小程序) 1.通过H5自带的获取经纬度的方法优点: 需要引用的资源较少,H5自 ...
h5 调起相机_H5移动端调用相机或相册
一: 前提在做H5时,有时要实现拍照功能,这就要调取手机端的相机,当时,在网上搜了很多能实现的方式,最后还是用html5自带的 input标签,实现移动端调用手机摄像头.好了,话不多说,下面就是我实 ...
【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素--什么是像素像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
app去除html标签,wap、app移动端页面常用html标签汇总
1.section 将内容组织到精确的语义块,表示页面的一部分. 2.article article表示网页的一个文章.故事. 3.header (1)用在整页的页头 (2)section或者arti ...
在mac电脑上,用Safari浏览器调试ios手机移动端页面
打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器], 具体如下图所示打开Mac上Safari的开发者模式,流程是[Safar ...
h5页面提示只能在微信浏览器中打开_h5移动端开发判断只能在微信浏览器打开...
在开发的过程中可能会遇到项目只能在微信浏览器打开的需求,那么只需要在项目的页面添加以下代码即可(单页面应用在入口文件添加即可). var ua = navigator.userAgent.toLowe ...
[html] 移动端如何禁止用户手动缩放页面？
[html] 移动端如何禁止用户手动缩放页面? <meta name="viewport" content="width=device-width,initial- ...
移动端h5框架自适应_Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 Document * { padding: 0; margin: 0; } .one { width: 20%; height: 100px; float: l ...
解决并隐藏h5页面在新版微信iOS 端出现底部白色导航条
新版微信在苹果iOS 端的h5页面如果有路由跳转,会出现底部白色导航条.会占用页面的高度,如何去解决这个问题呢. 方案一页面跳转时重新定页面的高度,这样处理导航条仍然存在. 方案二使用histor ...

h5页面禁止复制_H5移动端页面禁止复制技巧

h5页面禁止复制_H5移动端页面禁止复制技巧相关推荐

最新文章

热门文章