禁用网页上的选择但不在表单上或人们无法通过鼠标选择输入字段答案

【问题标题】：Disable selection on webpage BUT not on forms or people can't select input fields by mouse禁用网页上的选择但不在表单上或人们无法通过鼠标选择输入字段
【发布时间】：2011-06-01 10:50:29
【问题描述】：

我想要做的是让整个页面无法选择，我已经这样做了：

$('*').disableSelection();

但是，当您填写表单时，您无法通过单击来选择它，因为我已将代码更改为：

$('*:not(input)').disableSelection();

但这也不起作用...我尝试为 $('input') 调用 enableSelection() 但这也无法覆盖 disableSelection...有什么想法吗？

【问题讨论】：

标签： jquery jquery-selectors css-selectors

【解决方案1】：

这是一个非常糟糕的主意，而且执行起来既困难又占用 CPU。

.disableSelection() 将禁用当前元素及其所有子元素的选择，因此即使您忽略选择器中的某些元素，如果它们的父元素已禁用其选择，这些元素也将无法选择。

为什么禁用对整个文档的选择不仅是一个坏主意，而且是一种不好的做法，因为它妨碍了可用性。这应该保留给一些非常具体的情况，例如提高安全性或实施像验证码这样的垃圾邮件保护；那么你可能不得不减少可用性。

.disableSelection-方法的创建目的是为了忽略不相关的内容被选中，例如特定的 UI 元素，如选项卡、按钮或其他描述性 UI 元素。所以这真的是提高可用性的问题，而不是阻碍它。

最后，这远不是阻止用户选择您的内容的有保证的方法，只会让他们感到恼火并且不太可能返回。

【讨论】：

感谢您非常详细的回复。我真的很感激，我在可拖动区域的网络应用程序（更具体的游戏）上使用它 - 因此我认为在我的情况下它是值得的。
@Logan，那为什么要在整个文档上使用星号选择器呢？不应该那样使用它，并且在您的情况下确实没有任何意义。只需使用“禁用选择”类禁用这些可拖动区域的选择。 $('.disable-selection').disableSelection();会快很多！

【解决方案2】：

我已将其更改为使用 :input （因为它包括所有类型的输入），但输入也有效： http://jsfiddle.net/infernalbadger/kWB6g/

【讨论】：

这里只是一个小提示：将它包裹在 $(document).ready(function(){ ... });也有帮助（起初在外部 js 文件中没有它就无法工作）
@Logan，jsFiddle 默认包装代码（onLoad），如您在左侧菜单中所见。这就是为什么它在那里工作但不在你的文件中的原因;）
@Richard D：你的小提琴在 Firefox 上不起作用，我无法选择输入框中的文本。
@Darth 哦，是的，我没有在 Firefox 中测试过。在 chrome 中工作。
@Richard D，这是因为.disableSelection 对 Webkit 中的输入根本没有任何影响。删除:not(:input)，它仍然可以在 Webkit 中使用。