首页 > 其他分享 >css 让文字不被选中之-moz-user-select 属性介绍

css 让文字不被选中之-moz-user-select 属性介绍

时间:2024-05-17 23:41:39浏览次数:26  
标签:moz none selected element user css select

让文字不被选中,应该有一个css属性进行控制,结果网上查了下发现了-moz-user-select 属性介绍  

他在ie下也能选中文字,但是选中其他列表,不会选中文字,原来它是在不同div中,属于不同的范围,而同事是放在同一个table中,当然会选中。
而在firefox下,文字不会被选中,查看google calender的css,原来还有-moz-user-select这个属性,很好玩!
最后采用一个了js方法,即onselectstart=function{return false;},不让页面进行选择,呵呵,这是很多网站不让复制采用的方法。

防止选取 <div> 元素的文本:

1 2 3 4 5 div {   -webkit-user-select: none; /* Safari */   -ms-user-select: none; /* IE 10+ and Edge */   user-select: none; /* Standard syntax */ }

Summary
-moz-user-select is a Mozilla property extension to CSS that is used to determine whether or not an element may have its content selected.

Media: interactive

Possible uses include: prohibiting the selection of content in attempts to reduce blatant copying.

Syntax
TARGET_ELEMENT{-moz-user-select: none;}Legal Values

ValueDescription
inherit Inherit the value from the parent element.
none None of the content may be selected.
text Only the text within the element may be selected.
element A single element may be selected (from many).
elements Multiple elements may be selected.
all The contents must either be selected in entirety or none at all.
toggle The contents are selected "following a standard toggling content model" [1].
tri-state unknown
-moz-all unknown

Usage Examples

This sample code provides a simple "Hello, World!" text which prevents the user from selecting the content:

1 2 3 <span style="-moz-user-select: none;"> Hello, World! </span>

Notes

This property is similar to the user-select property of CSS3.

When the 'none' value was applied to a heading element the content could still be selected.

According to the W3C, the "User agent's default style sheet may override this value. For example, user agents typically do not allow selection of the contents of a BUTTON element. [2] As the -moz-user-select was designed to mimic the user-select property, the same applies.

Specification Conformance

Doesn't conform to CSS standards; A Mozilla CSS Extension.

Browser Compatibility

Netscape 6+
Mozilla 0.6+
Firefox 1.0+

See Also

-moz-user-focus
-moz-user-input
-moz-user-modify

css中的 “-moz-user-select”和“-khtml-user-select”属性是什麽意思?以及它们的用法?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1{ -moz-user-select:-moz-none; } </style> </head> <body> <h1>这里在firefox中会显示不同</h1> <pre> 屏蔽选择的样式定义:-moz-user-select属性(只支持ff)。 属性有三个属性值: 1、 none:用none,子元素所有的文字都不能选择,包括input输入框中的文字也不能选择。 2、 -moz-all:子元素所有的文字都可以被选择,但是input输入框中的文字不可以被选择。 3、 -moz-none:子元素所有的文字都不能选择,但是input输入框中的文字除外。 IE浏览器下是通过 onselectstart=”javascript:return false;”事件来实现该功能。 </pre> </body> </html>
复制  

-khtml-是苹果的那个浏览器的 好像现在使用-webkit-user-select: none

标签:moz,none,selected,element,user,css,select
From: https://www.cnblogs.com/suducn/p/18198905

相关文章

  • CSS动画-数字轮盘滚动效果实现(组件封装,快速使用)
    效果图:原理分析:这玩意就和垂直方向的轮播图差不多,只是把轮播的图换成数字 主要实现:父组件:父组件接收一个curNum属性,这个属性代表当前需要显示的数字。它将这个数字传递给子组件AnimateNum,以便子组件可以正确地显示和滚动数字。子组件一(AnimateNum):这个组件接收父组件传递......
  • php 判断 if (empty($user->published_at) != empty($user_input['published_at']))
    这里的逻辑是:如果$user->published_at为空,并且$user_input['published_at']不为空,或者如果$user->published_at不为空,并且$user_input['published_at']为空,那么条件将成立。这种检查通常用于确定某个值是否发生了变化,特别是从无到有或从有到无的情况。假设您的意图......
  • DevExpress WinForms中文教程 - HTML & CSS支持的实战应用(一)
    DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任!在这篇文章中,我们将概述使用DevExpressWinFormsH......
  • CSS实现浮动效果
    一、浮动早期用于实现文字环绕图片(环绕布局),现在用于让元素并列布局(块元素并排)。浮动元素会脱离文档流,后边的元素会把空出来的位置补上去。但是又因为浮动元素的层级高,所以会将未浮动的元素进行覆盖,但是文字不会。float:none无浮动,left左浮动,right右浮动。1、css布局的三种机......
  • CSS cursor(鼠标样式)
    属性值示意图描述auto 默认值,由浏览器根据当前上下文确定要显示的光标样式default默认光标,不考虑上下文,通常是一个箭头none 不显示光标initial 将此属性设置为其默认值inherit 从父元素基础cursor属性的值context-menu表示上下文菜单可用......
  • CSS布局概念与技术教程
    以下是一份CSS布局学习大纲,它涵盖了基本到高级的CSS布局概念和技术引言欢迎来到CSS教程!如果你已经掌握了HTML的基础知识,那么你即将进入一个全新的世界,通过学习CSS(CascadingStyleSheets,层叠样式表),你将能够赋予网页丰富的视觉效果和布局。CSS是前端开发中不可或缺的一部分,它可......
  • pinus老项目启动遇'Property connector does not exist on type UserRpc'报错
    跟示例项目对比过,配置代码并无出入,尝试在示例中新增远程调用connectorRemote可用,证明代码配置正确尝试在示例项目中使用工作项目的配置文件包括引用的模块文件目录列表如下 packagespluginspackage.jsonpackage-lock.jsontsconfig.jsonyarn.lock 示例安装模块后,运......
  • WEB自动化测试-CSS定位
    CSS相对定位:1、可维护性更强2、语法更加简洁3、可以解决复杂定位场景调试方法:1、进行浏览器的console:2、输入:$(""),输入内有字符串和外层字符串相反,外单内双,外双内单CSS基础语法4方式1、id:$("#site-logo")格式:$("#+id")2、class:(".logo-big")格式:$("......
  • css-flex布局 space-between最后一行向左对齐
    首先我们实现的是如下图<template><divclass="father"><divclass="child"></div><divclass="child"></div><divclass="child"></div><divclass="child......
  • CSS在线格式化、美化、压缩工具
    网上有不少CSS格式化压缩的工具,但是不少站点有广告干扰,或操作起来不方便,或打开速度比较慢,所以自己定制了这个css格式化压缩的工具,也希望对大家有帮助,提供的这个CSS代码格式化和css在线压缩工具,不需要下载使用YUICompressor或CSSTidy等离线格式化工具,直接在线压缩操作即可。免......