• 技术文章 >web前端 >html教程

    html如何取消文本选中

    醉折花枝作酒筹醉折花枝作酒筹2021-06-03 11:30:13原创88

    在HTML中,可以使用user-select属性取消文本选中,只需要给元素设置“user-select:none”代码即可。user-select属性用于设置用户是否能够选中文本,当值为none时,表示文本不能被选择。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    user-select属性是css3新增的属性,用于设置用户是否能够选中文本。可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项的说明,更多信息可参考如下css3文档说明。

    (1) 语法

    **user-select:**none | text | all | element

    **默认值:**text

    适用范围:除替换元素外的所有元素

    (2) 取值说明

    none:文本不能被选择

    text:可以选择文本

    all:当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素,那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。

    Element:可以选择文本,但选择范围受元素边界的约束

    (3) 说明

    1.IE6-9不支持该属性,但支持使用标签属性 onselectstart=”return false;”来达到 user-select:none 的效果;Safari和Chrome也支持该标签属性;

    2.直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的标签属性 unselectable=”on” 来达到 user-select:none的效果;unselectable 的另一个值是off;

    3.除Chrome和*Safari外,在其它浏览器中,如果将文本设置为 -ms-user-select:none;,则用户将无法在该文本块中开始选择文本。不过,如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为 -ms-user-select:none; *的区域文本;

    4.对应的脚本特性为userSelect

    (4) 示例

    css代码:

    .box{
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    html代码:

    <div class="box" onselectstart="return false;" unselectable="on">
        这是测试数据
    </div>

    效果:

    GIF.gif

    推荐学习:html视频教程

    以上就是html如何取消文本选中的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css3 user-select
    上一篇:html怎么实现密码隐藏显示 下一篇:如何将axure文件导出为html
    第16期线上培训班

    相关文章推荐

    • html图片怎么设置透明度• html乱码怎么办• html左边对齐怎么设置• html怎么实现表头不动• html如何设置语言为中文

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网