除了输入之外的所有内容的disableSelection

我要求在网页上禁用除输入[type = text]元素之外的所有内容。

这个接受类似问题的答案几乎可以解决问题,但它不会禁用包含input [type = text]元素的容器的选择。 因此,用户仍然可以通过从这些容器中的一个容器内开始拖动操作来进行选择。

这是否可行,即是否可以禁用容器元素的选择,同时为子元素启用它(特别是子输入=文本元素)。

@Pointy,“为什么不先取出第一个.not()电话?”

取出第一个.not调用,将给出:

 $('body').not('input').disableSelection(); 

正如链接问题所指出的那样,它仍将禁用页面上的所有内容,包括输入[type = text]元素。

@David Thomas,“你有一个现场演示……”

我没有现场演示,但它相当简单。 例如,带有一些填充的div,其中包含input [type = text]元素。 结果是:

  • 使用$('body').not('input').disableSelection(); 对所有页面禁用selectiopn,包括输入元素。

  • 使用$('body *').not(':has(input)').not('input').disableSelection(); 对于不包含input元素的所有元素禁用选择。 但是可以通过从包含input元素的容器中启动拖动操作来选择整个页面。

好吧,收紧你的吊带并为一个非常肮脏的黑客做好准备。

免责声明:

我不认为这是做事的好方法。 我只想解决获得OP所需function的挑战。 如果其他人能够以更干净的方式使用它,请发布它。


在使用disableSelection()函数后,似乎如果父元素被禁用,它的所有子元素也将是不可选择的( 如果我错了,请纠正我 )。 所以,我决定如果你想要除了小部件之外的所有东西都是不可选择的,你可以将所有标记放在一个不可选择的

并使用绝对定位来放置标签的可选克隆(或任何标签,真的)在无法选择的人之上。 这些克隆将驻留在未禁用的第二个

中。

以下是这个想法的一个例子: http : //jsfiddle.net/pnCxE/2/ 。

缺点:

  • 造型成为一个令人头疼的问题。 由于克隆位于单独的位置,因此无法克隆依赖于父级样式(即位置,大小,颜色等)的任何元素。
  • 表单变得更难管理,因为(再次)克隆与克隆元素不在同一个地方。
  • 您必须处理命名冲突,因为克隆将具有与克隆元素相同的ID。 (这是可行的;我只是不想编码它,因为任何使用这个想法的人都可能需要特别注意)

因此,虽然您可以解决可选择的限制,但最好只接受容器选择。 在将此代码放入生产环境之前,我会想很久很久。

我找到了一个看起来像我想要的解决方案,并且会对jquery / javascript专家的评论/改进感兴趣。

 $(document).ready(function () { $("body").disableSelection(); $("body").delegate('input[type=text],textarea', "focus", function () { $("body").enableSelection(); }); $("body").delegate("input[type=text],textarea", "blur", function () { $("body").disableSelection(); }); }); 

当文本框(input [type = text]或textarea)具有焦点时,使用鼠标拖动仅选择文本框中的文本。 因此,当文本框具有焦点(在焦点和模糊事件之间)时,允许选择整个页面是“安全的”。

在IE8 / 9上的文本框之间进行选项卡时会有明显的延迟。 它在谷歌浏览器上并不明显,据我所知,谷歌浏览器具有更快的JavaScript引擎。 所以我可以忍受性能的提升,特别是因为IE10将拥有更快的javascript引擎。

UPDATE

使用ASP.NET UpdatePanel ,需要修改此选项以在每次部分回发后禁用选择:

 Sys.Application.add_load(function () { $("body").disableSelection(); }); 

尝试这个,虽然它与你已经使用的相同:

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

我不知道为什么你必须使用整个body元素而不是缩小到文本节点(p,h [..],ul,ol等)

我同意@David Thomas的说法 – 看到你正在研究的测试页面会更容易。