【问题标题】:Making text unselectable [duplicate]使文本无法选择[重复]
【发布时间】:2011-07-09 15:03:15
【问题描述】:

所以,在使用 HTML5 中的滚动条和其他东西时,我开始注意到一个令人讨厌的趋势。如果我的元素附近有正在拖动的文本(例如,视频的滑动条、滚动条、用户单击和拖动的任何内容),则附近的文本将被选中,就好像我没有使用控件一样,只是拖动在页面上方。

这非常烦人,我似乎无法在 google 上找到正确的字符串来确定是否可以使某些元素“不可选择”。

有人知道怎么做吗?

【问题讨论】:

    标签: javascript html css cross-browser textselection


    【解决方案1】:

    它因浏览器而异。这些 CSS 属性将针对基于 WebKit 和 Gecko 的浏览器,以及任何未来支持 user-select 的浏览器:

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    

    【讨论】:

    • 太棒了!我很尴尬,我在不知情的情况下做到了这一点。
    • 只知道-moz 只会使选择的外观不可见,它不会在功能上禁用它。 developer.mozilla.org/en/CSS/-moz-user-select
    • 还有 -o-user-select 用于 Opera 和 unselectable expando 属性用于 IE。有关详细信息,请参阅我的答案。
    • @Marcel 如果不是以前,就是现在(正如我所料......)。只是说。
    • 我只是 tried it out in a few browsers 我已经安装了 Windows(Fx 3.6 和 13、Chrome 20b、Opera 和 IE10)。 Firefox 3.6 似乎在突出显示特定元素、突出显示兄弟元素和使用此方法复制到剪贴板的内容之间表现得最好。最新的稳定版 Opera 仍然不支持阻止任何这些,我无法在 IE10 中使用任何东西,即使设置了unselectable="on" 属性。
    【解决方案2】:

    在 IE 中,您可以使用unselectable="on" 属性使元素内的文本立即不可选择(即不适用于其子元素中的文本)。

    请注意,如果从 javascript 申请,您必须使用 el.setAttribute("unselectable","on")。只是尝试el.unselectable="on" 是行不通的。 (在 IE9 中测试)。

    【讨论】:

    • 当 IE9 处于标准模式时你是对的(在兼容模式下 unselectable 属性工作正常)。我现在更新了五个涉及unselectable 的答案(显然这是一天内允许对您自己的帖子进行编辑的最大数量。我不知道为什么)。奇怪的是,您的一项修改获得了批准,而一项相同的修改被拒绝了。
    • 关于为什么在 IE 9 中发生这种变化的一些背景:msdn.microsoft.com/en-us/library/ie/gg622931%28v=vs.85%29.aspx
    猜你喜欢
    • 1970-01-01
    • 2011-01-19
    • 2012-05-14
    • 1970-01-01
    • 2014-03-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多