css不允许长按选择

2024-08-28

移动端 css 禁止长按屏幕选中

*{ -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

/*如果是禁用长按选择文字功能,用css*/ * { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } input { -webkit-user-select:auto; /*webkit浏览器*/ } // 如果是想禁用长按弹出菜单, 用js window.a

JQuery Mobile - html5+CSS 禁止IOS长按复制粘贴实现

因为在移动端APP需要实现长按执行别的事件,但是在IOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法.实际测试,也并不是很理想,但是可能没有更好办法了! /*设置IOS页面长按不可复制粘贴,但是IOS上出现input.textarea不能输入,因此将使用-webkit-user-select:auto;*/ *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*

ipad webapp禁止长按选择

1.禁止长按屏幕弹出对话框并选中文字 /*禁止长按选择文字事件*/ * { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 2.页面滑动加速(惯性) /*滚动加速*/ body, html { -webkit-overflow-scrolling:

CSS自定义select下拉选择框(不用其他标签模拟)

今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方案就是用其他的元素(如ul,li)模拟下拉菜单,或者是使用网上一些现成的插件. 其实select这个东西只靠纯CSS是不能解决这个自定义样式问题的,但既然折腾了这么久,还是说一下CSS实现的思路吧. 首先对于默认的样式: 刚开始想到使用背景,但经试验对select设置背景是无效的,于是后来就想到了覆

CSS Pseudo-Element Selectors伪对象选择符

一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效. 为了支持IE8,许多目前许多情况还是使用单个冒号,显示效果一样 Selectors选择符 CSS Version版本 Description简介 E:first-letter/E::first-letter CSS1/CSS3 设置对象内的第一个字符的样式. E:first-line

css和js禁止网页选择文字

user-select有两个值: none:用户不能选择文本 text:用户可以选择文本需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整 <style> body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*

【CSS】 CSS基础知识属性和选择

css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属性,这样的话样式只应用于这个标签: <h1 style="属性:属性值;属性2:属性值;"></h1> 2. 在文件头的<head>里面加上<style type="text/css">标签,标签里面以css的格式写样式,

如何在CSS中解决长英文单词的页面显示问题？CSS3

简言在页面排版中,经常遇到长英文单词溢出段落容器的情况,如何解决该问题?现编制如下对比演示程序: 演示程序 42du.cn-在线演示程序部分html代码 <div class="block"> <h4>word-break:break-all;</h4> <p class="break-all">Extraordinarily longlong word!</p> </div> CSS代码

java：CSS（定位，组合选择符，边距，Float，Table的样式，显示和隐藏，换行，盒子模型，iframe和frameset框架）

1.绝对定位,相对定位,fixed定位(指浏览器窗口定位): <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定位:绝对定位和相对定位</title> <style> #div1 { border: 1px solid black; width: 30px; height: 30px; /* 定位1:fixed 指定位到浏览器窗口某

css内容过长显示省略号的几种解决方法

单行文本(方法一): 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...) 说明: 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出. 最大的缺点:text-overflow:ellipsis属性在FF中是没有效果的. /* 内容过长显示成省略号(内容显示为一行) */ white-space: nowra

js随笔，css和js禁止网页选择文本，table的class样式使得td的class样式失效，jquery获得元素坐标

css使用user-select,user-select不是W3C标准,浏览器支持不完整:user-select有两个值,none用户不可以选择文本,text用户可以选择文本 body{-moz-user-select: none; /*火狐*/-webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; /*IE10*/-khtml-user-select: none; /*早期浏览器*/user-select: none;} 也

css笔记08：id选择器之父子选择器

1.父子选择器 (1)01.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

iOS长按选择

确实,其实就是一个长按手势 + 图片二维码识别,原生SDK从8.0开始支持 /** * 从照片中直接识别二维码 * @param qrCodeImage 带二维码的图片 * @param myQRCode 二维码包含的内容 */ + (void)readQRCodeFromImage:(UIImage *)qrCodeImage myQRCode:(void(^)(NSString *qrString,NSError *error))myQRCode;{ UIIma

网页中使用CSS和JS阻止用户选择内容

CSS实现 body{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } JavaScript实现 oncontextmenu="return false;" //禁止鼠标右键 ondragstart="return false;" //禁止鼠标拖动 onselectstart="return false;"//文字

css 实现元素长宽等比缩放

实现思路(长宽比2:1): 以父级元素为基准, 子级 width:100%; (也就是父级宽度的 100%), padding-top:50% (也就是父级宽度的 50%, 根据 css 规范, padding 用百分比表示的话, padding: 100% 等于父元素的宽度); 为什么不直接 width: 100%; height: 50%; ? 那样高度就成了父级高度的 50% (不合题意, 除非父级宽高相等); <style type="text/css"> #con

css文本过长如何设置省略号

对于单行文本: 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...) 说明: 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出. 最大的缺点:text-overflow:ellipsis属性在FF中是没有效果的. 注意: 一.仅定义text-overflow:ellipsis; 不能实现省略

纯css实现同一页面下选择之后更换内容效果

实现效果为如下:在同一页面下,当我选中输入手机号时,出现手机号输入框,当我选中输入验证码时,出现验证码输入框,当我选中设置密码时,出现密码框在这里有一个小技巧,就是 1.对下面的输入框设置同样的样式,保证在更换的时候不出现抖动:2.对输入框区域一开始就设置display:none.让其不显示,在上方单选框checked的时候再显示出来. html代码如下: <div class="main1"> <input type="radio" name

CSS学习（二）选择符

元素选择符:以元素名作为选择符(span{ color: red; }) 群组选择符:将两个选择符用逗号隔开构成群组(span, div{ color: red; }) 通用选择符:通用选择符(*)将匹配所有元素(*{ color: red; }) 类选择符:根据类名匹配元素(.类名{ color: red; }) ID选择符:根据ID值匹配元素(#id{ color: red; }) 属性选择符简单属性选择符:根据是否有这个属性匹配元素(span[class]{ color: red; })

css 字符过长...

text-overflow: ellipsis; white-space: nowrap; overflow: hidden; overflow: hidden; white-space: nowrap; display: -webkit-box;

不同CSS布局实现与文字鼠标选择的可用性——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2401 一.文字选择的可用性我们平时因为A原因或B原因,需要复制web页面上的文字内容.常见的操作就是按住鼠标,选中要复制的文字区域,抬起鼠标按键,目标区域的文字就选中了. 不知你知不知道,有些看山去OK的CSS布局实际影响了页面上文字复制的可用性. 这么说吧,假设你在微博上看见一个名为“屌丝逆袭”的标题,但是,由于孤