移动端禁止页面复制文字

有时候操作H5页面需要长按某个按钮的时候,会出现浏览器系统自带的复制功能很烦,怎么解决呢,只需要加入以下样式。

body {
  -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; /*用户是否能够选中文本*/
}

 但是在输入框input select 不能输入文子,所以还需要加入一些允许他们输入的样式

 

input,select {
  -webkit-user-select:auto; /*webkit浏览器*/
  user-select: auto; /*用户是否能够选中文本*/
}

  

  

原文地址:https://www.cnblogs.com/jaume/p/10070713.html

时间: 2025-01-17 14:50:06

移动端禁止页面复制文字的相关文章

移动端禁止页面下滑

背景: 本人开发移动端h5时,想让页面禁止向下滑动,最初的代码如下: html,body{ overflow: hidden; } 在chrome移动端调试工具中可以,但是用iphone的微信打开,失效了. 解决方案: 方法一: html,body{ position:fixed; overflow-y:hidden; } 方法二: html,body{ overflow: hidden; width: 100%; height:100%; } 参考资料:移动端如何禁用横向滚动条? - 前端开发

禁止页面被复制和禁止右键,一段样式一段JS就行了,无需复杂设定!

群里小伙伴经常问怎么禁止页面复制和右键,其实这个问题百度一下是很多资料的,我估计小伙伴都懒,所以这里统一回复下: 找到模板里面的</head>,在上面加如下代码就行了 <style type="text/css">  body {      -webkit-touch-callout: none;      -webkit-user-select: none;      -khtml-user-select: none;      -moz-user-selec

HTML 禁止复制文字

因为本人平时喜欢看网络小说,但是喜欢看的文通过正经网站或者app都需要收费,让人很是不爽,所以...总之,百度网盘上资源很多.但是问题来了,这些资源肯定不会是作者自己流出的,也不应该是网站或app流出的,更不可能是读者手打的.所以,最大的可能就是上网站复制的...所以不明白为什么网站要允许复制.下面是禁止复制文字的实现方式: 1.禁用选中和右键: 在<body>标签中添加以下代码: οncοntextmenu='return false' //禁止右键 οndragstart='return

禁止页面内按F5键进行刷新(扩展知识:禁止复制信息内容)

禁止页面内按F5键进行刷新: 1 //禁止页面内按F5键进行刷新 2 function f_DisableF5Refresh(event) { 3 var e = event || window.event; 4 var keyCode = e.keyCode || e.which; 5 if(keyCode == 116) { 6 if(e.preventDefault) { //非IE 7 e.preventDefault(); 8 } else { //IE 9 e.keyCode = 0

微信小程序实现(禁止页面滚动、长按复制)

1. 禁止页面滚动对于小程序某些一屏的页面,特别是全屏的swiper,并不希望页面在竖直方向上可以滚动. 实现方式:在需要禁止滚动页面的json中加入: "disableScroll": true 1 注意:只在页面配置中有效,无法再app.json中设置该项 参考:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#页面配置 2. 长按复制 <text class='copy_conten

简单实现禁止用户复制自己网页文字

<html><head><title>禁止用户复制网页内容(方法一)</title></head><body onselectstart="return false"><p>本特效由巴黎接机网(www.balijieji.com)编辑提供</p></table></body></html>

【移动端】js禁止页面滑动与允许滑动

禁止页面滑动 通常静止滑动方案:(阻止滑动事件) window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; e.stopPropagation && e.stopPropagation(); return false; }; 有部分机型不支持以上静止滑动方案,可使用:(点击后页面浮动到指定位置不动 将body的position设置为fixed) $

html5 移动端单页面布局

序     移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是在一个页面下进行 不需要页面跳转 ,再通俗的说就是类似于平常的选项卡 但是他又比选项卡要复杂一点 因为他是在手机端 并且当做是一个页面 单页面的作用以及优势:    1.嵌套到native里实现app的混合开发    2.数据量小的页面用单页面便于开发    3.无需跳转页面响应更快 Demo效果

移动端H5页面高清多屏适配方案

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言: