当前位置:  开发笔记 > 编程语言 > 正文

有没有办法在HTML页面上使文本无法选择?

如何解决《有没有办法在HTML页面上使文本无法选择?》经验,为你挑选了7个好方法。

我正在构建一个包含一些文本元素的HTML UI,例如选项卡名称,这些元素在选中时看起来很糟糕.不幸的是,用户很容易双击选项卡名称,默认情况下会在许多浏览器中选择它.

我或许可以通过JavaScript技巧来解决这个问题(我也希望看到这些答案) - 但我真的希望CSS/HTML中的某些东西直接适用于所有浏览器.



1> Tim Down..:

在大多数浏览器中,这可以使用CSS实现:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

对于IE <10和Opera,您需要使用unselectable您希望不可选择的元素的属性.您可以使用HTML中的属性进行设置:

...

遗憾的是,这个属性不是继承的,这意味着你必须在一个内部的每个元素的开始标记中放置一个属性

.如果这是一个问题,您可以使用JavaScript以递归方式为元素的后代执行此操作:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));


你可以使用这个选择器[unselectable = on] {...}然后你避免增加额外的类

2> dimarzionist..:

编辑

代码显然来自http://www.dynamicdrive.com


事实上,你在所有情况下都在改变它(缩进是误导性的)

3> Blowsie..:

所有正确的CSS变体都是:

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



4> Stephen M. R..:

试试这个:

some stuff

简单但有效......适用于所有主流浏览器的当前版本.


完美地为我们的应用程序工作(我们只针对IE用户).

5> Jorge Alves..:

对于Firefox,您可以将CSS声明"-moz-user-select"应用于"none".查看他们的文档,用户选择.

这是他们所说的未来"用户选择"的"预览",因此基于Opera或WebKit的浏览器可能会支持它.我还记得为Internet Explorer找到了一些东西,但我不记得是什么:).

无论如何,除非是特定的情况,文本选择使一些动态功能失败,你不应该真正覆盖用户期望从网页,并且能够选择他们想要的任何文本.


同样在Safari/Chrome /等.-khtml-用户选择:无;

6> jlleblanc..:

我发现这里描述的CSS有一定程度的成功http://www.quirksmode.org/css/selection.html:

::selection {
    background-color: transparent;
}

它解决了我ul在AIR应用程序(WebKit引擎)中使用一些ThemeRoller 元素时遇到的大多数问题.仍然会得到一个小的(大约15 x 15)虚拟补丁被选中,但之前选择了一半的页面.



7> Dave Rutledg..:

绝对地将文本区域上的div放在z-index较高的位置,并为这些div提供透明的GIF背景图形.

注意一点 - 你需要将这些'封面'链接起来,所以点击它们会把你带到选项卡所在的位置,这意味着你可以/应该将锚元素设置为display:box,宽度和高度设置以及透明背景图像.


这种黑客很可怕.我会亲自避免它.
推荐阅读
重庆制造漫画社
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有