广告位联系
返回顶部
分享到

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

css 来源:互联网 作者:佚名 发布时间:2024-05-07 22:08:12 人浏览
摘要

他在ie下也能选中文字,但是选中其他列表,不会选中文字,原来它是在不同div中,属于不同的范围,而同事是放在同一个table中,当然会选中。 而在firefox下,文字不会被选中,查看google cal

他在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

Value Description
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>


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • CSS实现div滑入效果
    Vue3 + CSS实现div滑入 animation 定义动画 transform定义偏移 opacity,设置清晰度,实现从无到有 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .entity-btn { position: abs
  • css让文字不被选中之-moz-user-select属性介绍
    他在ie下也能选中文字,但是选中其他列表,不会选中文字,原来它是在不同div中,属于不同的范围,而同事是放在同一个table中,当然会选
  • CSS user-select属性(是否允许用户选中文本)

    CSS user-select属性(是否允许用户选中文本)
    本文操作环境:Windows7系统,CSS3版本,Dell G3电脑。 user-select,设置或检索是否允许用户选中文本 user-select 属性规定是否能选取元素的文本。
  • a标签的bug hover状态不触发,可点区域不可点击

    a标签的bug hover状态不触发,可点区域不可点击
    度假项目告一段落了,但在项目中遇到的问题却不少,这里挑几个重要的bug或者说失误,来进行说明。 先来看一下有哪几个bug或者失误要分
  • CSS实现浮动效果

    CSS实现浮动效果
    一、浮动 早期用于实现文字环绕图片(环绕布局),现在用于让元素并列布局(块元素并排)。浮动元素会脱离文档流,后边的元素会把空出
  • CSS实现dom脱离文档流定位固定位置的代码
    在CSS中,要使一个DOM元素脱离正常的文档流并定位在页面的右顶部,你可以使用position属性。通过设置position: absolute;或position: fixed;,可以将
  • CSS中五种常见定位方式总结

    CSS中五种常见定位方式总结
    1. CSS的position属性值 static:默认值,元素在正常的文档流中,不会被特别定位。 relative:相对于元素在文档流中的初始位置进行定位的。
  • stylus入门使用方法
    Stylus 是一种富有表现力、动态的、健壮的 CSS 预处理器,它可以让你用更加高效、简洁的方式来编写 CSS。与其他 CSS 预处理器(如 Sass 和
  • css3 iphone玻璃透明气泡完美实现

    css3 iphone玻璃透明气泡完美实现
    最近在一个私活做手机项目时候,需要实现一个类似ios 6中短信那样的气泡效果。 这里分享下实现心得,希望能给大家一点启发。 首先分析
  • 巧用 :has & drop-shadow实现复杂布局效果

    巧用 :has & drop-shadow实现复杂布局效果
    最近,群里聊到了一个很有意思的布局效果。大致效果如下所示,希望使用 CSS 实现如下所示的布局效果: 正常而言,我们的 HTML 结构大致
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计