使用 CSS 用户选择控制选择

IE10 平台预览 4 包括一个新的 CSS 属性的支持-ms-user-select,这使得 Web 开发者控制完全可以选择什么的文本,在其网站上更容易。如果你是看我一整天都在我的工作站,您会注意到我读计算机上时,我选择的文本。我不是只有一个人读起来像这 ;选择文本在互联网上是重要在很多其他方案。

考虑一个典型的新闻网站。大多数网页将包括新闻文章,其中,用户需要能够选择,因为他们读通过选择文本或因为他们想要共享内容的内容。此外在新闻网页上有一些菜单和链接到网站的其他部分。用户可能不需要选择这些项目。使用-ms-user-select,Web 开发人员可以指定所选文本是新闻文章中允许使用,但不是允许在菜单中。

IE 试驾站点包括执行此操作的示例。

Screen shot of the user-select Test Drive demo showing one possible markup pattern of -ms-user-select.

设置-ms-user-select:none上整个页面,然后设置 -ms-user-select:element元素包含在博客上后允许只被选中的博客文章的内容。-ms-user-select:element是一个新的属性,首先引入的 IE,我们认为可以在很多情况下有用。设置-ms-user-select:element意味着用户可以选择该元素的文本,但是,所选内容将受到限制的元素范围。人想选择新闻文章的内容可能不想选择页脚元素,只是过去的文章。设置-ms-user-select:element可以轻松地为用户只是选择文章的内容,而不必担心会变鼠标放置完全正确。

-ms-user-select接受四个值:

  • 文本是可选择的text— —
  • element— — 文本是可选的、 限制为元素的边界
  • none— — 文本不可选
  • auto— — 如果元素包含可编辑文本的输入的元素或 contenteditable 元素,如文本是可选。否则选择由父节点的值确定。

auto是的默认值为-ms-user-select.

开发人员可以通过设置关闭文本选择-ms-user-selectnone。在 IE,当文本设置为-ms-user-select:none,用户将无法启动所选文本的那块内。但是,如果用户开始选择在页的不同区域中的文本,选择将持续至任何页面包括地区的区域位置-ms-user-selectnone。在 Firefox,如果开发人员设置–moz-user-select:none然后选择在这一领域无法启动,并且也不能包含在任何其他选择。在 Webkit,设置–webkit-user-select:none会使它显示,如果文本不是包含在所选内容,但是如果您复制并粘贴内容,您将看到内容包括在选定内容中。

user-select了原先建议在用户界面的 CSS3模块 ;此模块以来已取代了CSS3 基本用户界面模块,但它并不定义该属性。Mozilla和Webkit支持自己的此属性的前缀的版本。然而,如上所述,有了实现的一些差异。

玩IE 试驾站点上的示例,让我们知道你的想法。

— — 沙龙纽曼,程序管理器、 Ie 浏览器

转载于:https://www.cnblogs.com/shihao/archive/2012/02/11/2346370.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275013.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一个在校的普通前端小姐姐的2021

大家好,我是若川。这是我的源码共读群里一个大三的前端小姐姐(小曹同学)的年度总结。她写了5篇源码笔记。同时做了很多项目,获得了很多奖。而且策划和建立了学校工作室的前端训练营,40人报名参加。总之就是现在的大学生…

按钮 交互_SwiftUI中的微交互—菜单按钮动画

按钮 交互Microinteractions have become increasingly important in a world with a dizzying number of digital platforms and an ocean of content. While microinteractions used to be considered an interesting resource in the early days of digital design, in toda…

JavaScript逻辑运算符的使用技巧

前言 !, &&, || 三个运算符是JavaScript中重要的逻辑运算符,本文将介绍这三个运算符在JavaScript实际编程中的有趣使用技巧。 取反运算符(!) 如果对一个值连续做两次取反运算,等于将其转为对应的布尔值,与Bool…

如何接触到最新的前端动态、最前沿的前端技术

众所周知,关注公众号可以了解学习掌握技术方向,学习优质好文,落实到自己项目中。还可以结交圈内好友,让自己融入到积极上进的技术氛围,促进自己的技术提升。话不多说,推荐这些优质前端公众号前端有道社区活…

选择控件— UI组件系列

重点 (Top highlight)The word “toggle” is a reference to a switch with a short handle that alternates between two states each time it is activated. You encounter it every time you “switch” on the lights.单词“ toggle”是指带有短手柄的开关,该开…

linux -- Linux diff与patch的深入分析

diff的输出格式分为传统格式和统一格式 1)diff的传统格式输出. ############################################ cat before.txt 输出: This is a line to be deleted This is a line that will be changed This is a line that will be unchanged cat after.txt 输出: This is …

shell命令之---sed

1. sed编辑器基础 1.1 替换标记 命令格式:s/pattern/replacement/flags $ cat data4.txt    This is a test of the test script.    This is the second test of the test script.    有4种可用的替换标记: 数字,表明新文本将替…

SEE Conf: Umi 4 设计思路文字稿

大家好,我是若川。持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。复制此链接 https:…

用户体验改善案例_改善用户体验研究的5种习惯

用户体验改善案例There’s plenty of misunderstanding around user research, whether it’s the concept of validation or one-off anecdotes being thrown around as concrete evidence for a product decision.用户研究存在很多误解,无论是验证的概念还是一次性…

一场赛跑引起的并发知识

享学特邀作者:老顾前言我们小伙伴们是不是经常需要测试代码的性能?小伙伴们是不是就会想到jmeter进行压力测试一下,模拟N个用户同时执行下,看看响应的时间多少。今天老顾就用一个经典的比赛案例,来尝试自行编写个比赛业…

oracle中使用子查询为何取到大于自然数1 rownum 浅度解析

Oracle 没有提供TOP N 语句,若希望按特定条件查询前N 条记录,可以使用伪列ROWNUM。 ROWNUM 是对结果集加的一个伪列,即先查到结果集之后再加上去的一个列(注意:先要 有结果集)。 rownum 的值是oracle 顺序分配的从查询返回的行的编…

巴克莱对冲_“巴克莱的财政预算案”:使金钱管理对心理健康有效—用户体验案例研究

巴克莱对冲Disclaimer: all official Barclays assets used for this project are purely for educational/project purposes only and do not reflect the intentions of Barclays or any of its affiliates.免责声明:用于此项目的所有官方巴克莱资产纯粹是出于教育…

6 个对所有 Web 开发者都有用的 GitHub 仓库

作者:Mehdi Aoussiad原文:https://javascript.plainenglish.io/6-useful-github-repositories-for-all-web-developers-44f26912fd66大家好,我是若川。持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与&…

快速删除数据库中所有表中的数据

今天又学到一招,可以快速删除数据库中所有的用户表中的数据。我是个菜鸟,望各位大神多多指教 select truncate table Name ; from sysobjects where xtypeU order by name asc; 该条语句执行之后会将数据库中所有的表都查询出来,复制出来之…

openfiler的iSCSI配置(二)

为什么80%的码农都做不了架构师?>>> 一.openfiler iSCSI配置 1.启动iSCSI target server服务。在Services列表下。 2.设置访问列表。在System---Network Access Configuration下设置。 3.创建卷设备 二.ISCSI客户端配置 1.安装open-iscsi # apt-get ins…

送你一份用Electron开发桌面应用的避坑指南【送3本书,含犀牛书】

大家好,我是若川。持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,新年第一次送3本书。抽奖规则见文末。如今,Electron 领域发生了重大的变革,Electron 版本更新换代极快,难以计数…

时间续

mois : janvier fvrier mars avril mai juin juillet aot septembre octobre novembre dcembre semaine : lundi mardi mercredi jeudi vendredi samedi dimanche 转载于:https://www.cnblogs.com/lavieenrose/archive/2012/02/18/2357597.html

nginx修改upstream不重启的方法(ngx_http_dyups_module模块)

为什么80%的码农都做不了架构师?>>> nginx很强大,第三方模块也不少,淘宝在nginx上很活跃,特别是章亦春,他参与的模块至少10, 好了今天主角不是他,是一款动态配置upstream的模块,这个…

c# 设计原则需要学习吗_向最好的学习:产品设计原则

c# 设计原则需要学习吗重点 (Top highlight)In my job as Design Team Lead at SimpleSite, I’ve recently been part of creating a set of Product Design Principles. In this process, I spent a lot of time studying the theory, learning about best practices, and ge…

初学Java-接口

在Java语言中,接口有两种意思: 一是指概念性的接口,即指系统对外提供的所有服务。类的所有能被外部使用者访问的方法构成了类的接口 二是指用interface关键字定义的实实在在的接口,也称为接口类型。它用于明确的描述系统对外提供的…