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

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

This accepted answer到类似的问题几乎可以解决问题,但它不会禁用包含input [type = text]元素的容器的选择.因此,用户仍然可以通过从这些容器之一开始拖动操作来进行选择.

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

@Pointy, “Why not just take out that first .not() call?”

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

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

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

@David Thomas, “Do you have a live demo …”

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

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

最佳答案 好吧,收紧你的吊带,为一个非常肮脏的黑客做好准备.

免责声明:

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

在使用disableSelection()函数后,似乎如果父元素被禁用,它的所有子元素也将是不可选择的(如果我错了,请纠正我).所以,我决定如果你想要除了小部件之外的所有东西都是不可选择的,你可以将所有标记放在一个不可选择的< div>中.并使用绝对定位来放置< input>的可选克隆标签(或任何标签,真的)在不可选择的标签之上.这些克隆将驻留在第二个< div>中.那是没有禁用的.

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

缺点:

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

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

点赞