题 如何禁用CSS或JavaScript文本选择? [重复]


可能重复: 
CSS规则禁用文本选择突出显示

我正在创建一个包含多个页面的HTML / CSS / jQuery库。

我确实有一个“下一步”按钮,这是一个与jQuery点击监听器的简单链接。

问题是如果用户多次单击该按钮,则选择该按钮的文本,然后选择整行文本。在我真正的黑暗设计中,这真的是丑陋而荒谬的。

所以这是我的问题:您可以禁用HTML上的文本选择吗? 如果没有,我会非常怀念flash及其在文本字段上的高级配置......


201
2017-09-23 14:39


起源




答案:


<div 
 style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
 unselectable="on"
 onselectstart="return false;" 
 onmousedown="return false;">
    Blabla
</div>

263
2017-09-23 14:44



webkit的CSS类似于Firefox的CSS,我编辑了添加它的答案。 - Jerome
@daviddarx适用于Chrome 17和Safari 5。 - mhenry1384
更新后在IE和Opera中运行 - Dan
这在2014年仍然很好吗? - JohnK
是的 caniuse.com/#feat=user-select-none - Martin Vseticka


更新2017年1月:

根据 我可以用吗user-select 目前在除Internet Explorer 9和早期版本之外的所有浏览器中都受支持(但遗憾的是 仍然 需要供应商前缀)。


所有正确的CSS变体都是:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


请注意,它是一个 非标准功能 (即不是任何规范的一部分)。它不能保证在任何地方都可以工作,并且浏览器之间的实现可能存在差异,并且将来的浏览器可能会失去对它的支持。


更多信息可以在中找到 Mozilla开发人员网络文档


224
2018-02-16 15:53



“正确的CSS变化”......?唯一正确的CSS“变体”是 user-select。 - BoltClock♦
好吧所以其他的是供应商特定的前缀,我认为其他人会认为那些是正确的变化。 - Blowsie
哈哈,你打算用同样的答案赚取你所有的代表吗?好啊:) - Starx
每个人都应该知道这在哪里工作,哪里不工作 caniuse.com/user-select-none - Dan
提供的解决方案不适用于Opera浏览器。如何为opera设置用户选择选项 - Raja


试试这个CSS代码以实现跨浏览器兼容性。

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

24
2017-12-21 23:33





您可以使用JavaScript来执行您想要的操作:


if (document.addEventListener !== undefined) {
  // Not IE
  document.addEventListener('click', checkSelection, false);
} else {
  // IE
  document.attachEvent('onclick', checkSelection);
}

function checkSelection() {
    var sel = {};
    if (window.getSelection) {
        // Mozilla
        sel = window.getSelection();
    } else if (document.selection) {
        // IE
        sel = document.selection.createRange();
    }

    // Mozilla
    if (sel.rangeCount) {
        sel.removeAllRanges();
        return;
    }

    // IE
    if (sel.text > '') {
        document.selection.empty();
        return;
    }
}

肥皂盒: 你真的不应该以这种方式搞砸客户的用户代理。如果客户想要在文档上选择内容,那么他​​们应该能够在文档上选择内容。无论如何  不喜欢高光颜色,因为  不是查看文档的人。


7
2017-09-23 16:20



肥皂盒反驳:我有一个按钮,当点击时,运行一些JavaScript来改变图片的规模。用户没有理由在该按钮内选择“+”或“ - ”,但大多数Web浏览器最终会在单击几次按钮后选择文本。同样,如果您通过javascript进行拖放操作,则不希望选择拖动某些内容的内容。也就是说,即使你不同意这个目标,我也很感激你仍然回答了这个问题。 - Robert
我承认在某些情况下它可以成为有效的设计选择。但问题提到他错过了Flash,暗示他错过了能够控制用户的客户端。我不同意这种思维方式。作为用户,我不喜欢网站重新定义本地软件的工作方式。这也是一个可访问性问题。 - James Sumners
@jsumners有 丰富 情况。做一些开箱即用的思考,你会想出多个场景。仅仅因为浏览器默认启用它并不意味着我们程序员应该遵守。此外,移动计算正在消除传统的文本选择手段。因此,它变得越来越重要。你让它听起来像是某种过时的黑客或其他东西,它是一个 支持的功能 (见上面的答案。) - b1nary.atr0phy
@ b1naryatr0phy再次,OP特别描述了他想要纯粹出于审美原因而控制用户客户端的场景。他的目标与功能无关,无论是触摸还是其他。特别是,他表示他会错过完全控制用户互动的能力,就像他可以用Flash一样。我认为这对于网络开发是一种破碎的方式,并且说了很多 后 提供不依赖于潜在未实现的CSS功能的解决方案(当时)。 - James Sumners
@jsumners网站设计师决定用户如何与他/她的页面进行交互,而不论其审美或功能目的是什么? - b1nary.atr0phy


我不确定你是否可以关闭它,但你可以改变它的颜色:)

myDiv::selection,
myDiv::-moz-selection,
myDiv::-webkit-selection {
    background:#000;
    color:#fff;
}

然后只是将颜色与你的“黑暗”设计相匹配,看看会发生什么:)


4
2017-09-23 14:42



您可以将其压缩为一个CSS规则。 myDiv.webkit :: - webkit-selection,myDiv.moz :: - moz-selection,myDiv.normal :: selection {background:#000;颜色:#FFF; } - Yahel
@yc:使用多选择器,我将编辑,谢谢:) - Kyle
#galleryPagesNavigation a.normal :: selection {background:#000; } #galleryPagesNavigation a.moz :: - moz-selection {background:#000; } #galleryPagesNavigation a.webkit :: - webkit-selection {background:#000; } - daviddarx
你有“普通”“moz”和“webkit”,删除那些,从这个答案中复制更新的代码:) - Kyle