除了输入[type = text]之外的所有内容的disableSelection

时间:2012-07-03 18:04:46

标签: javascript jquery html jquery-ui

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

This accepted answer类似的问题几乎可以解决问题,但它不会禁用包含输入[type = text]元素的容器的选择。因此,用户仍然可以通过从其中一个容器中启动拖动操作来进行选择。

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

  

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

取出第一个.not电话,会给出:

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

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

  

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

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

  • $('body').not('input').disableSelection();所有页面都禁用了选择,包括输入元素。

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

3 个答案:

答案 0 :(得分:1)

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

声明:

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


在使用disableSelection()函数后,似乎如果父元素已被禁用,其所有子元素也将无法选择(如果我错了,请纠正我)。所以,我决定如果你希望所有除了小部件之外是不可选择的,你可以将所有标记放在一个不可选择的<div>中,并使用绝对定位来放置{{{{ 1}}标签(或任何标签,真的)在不可选择的标签之上。这些克隆将驻留在未被禁用的第二个<input>中。

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

缺点:

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

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

答案 1 :(得分:1)

我找到了一个似乎可以做我想要的解决方案,并且对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引擎。

<强>更新

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

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

答案 2 :(得分:0)

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

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

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

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