4

我需要禁用网页上除 input[type=text] 元素之外的所有内容的选择。

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

这甚至可能吗，即是否可以禁用容器元素的选择，同时为子元素启用它（特别是子输入=文本元素）。

@Pointy，“为什么不直接取消第一个 .not() 电话？”

拨出第一个.not电话，将给出：

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

正如链接问题中所指出的，它仍然会禁用页面上的所有内容，包括 input[type=text] 元素。

@David Thomas，“你有现场演示吗……”

我没有现场演示，但它相当简单。例如，带有一点填充的 div 包含一个 input[type=text] 元素。结果是：

  • 对于$('body').not('input').disableSelection();所有页面（包括输入元素）都禁用了 selectiopn。

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

4

3 回答 3

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 上的文本框之间切换时有明显的延迟。这在 Google Chrome 上并不明显，据我所知它有一个更快的 javascript 引擎。所以我可以忍受性能下降，特别是因为 IE10 将拥有更快的 javascript 引擎。

更新

使用 ASP.NETUpdatePanel时，需要对其进行修改以在每次部分回发后禁用选择：

Sys.Application.add_load(function () {
    $("body").disableSelection();
});
于 2012-07-04T15:02:31.467 回答
1

好吧，收紧你的吊带，准备好进行一次非常肮脏的黑客攻击。

免责声明：

我不认为这是做事的好方法。我只是想解决获得 OP 所需功能的挑战。如果其他人可以以更清洁的方式使其工作，请发布。

在玩弄了这个disableSelection()功能之后，似乎如果一个父元素被禁用，它的所有子元素也将无法选择（如果我错了，请纠正我）。因此，我决定，如果您希望除小部分之外的所有内容都无法选择，您可以将所有标记放在一个无法选择<div>的位置，并使用绝对定位将您的<input>标签（或任何标签，真的）的可选择克隆放在不可选择的顶部. 这些克隆将驻留在<div>未禁用的一秒钟内。

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

缺点：

  • 造型变得很头疼。任何依赖于父样式（即位置、大小、颜色等）的元素都不能被克隆，因为克隆位于单独的位置。
  • 表单变得更加难以管理，因为（再次）克隆与克隆元素不在同一个位置。
  • 您必须处理命名冲突，因为克隆将具有与克隆元素相同的 ID。（这是可行的；我只是不想编写代码，因为任何使用这个想法的人都可能需要特别注意它）

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

于 2012-07-03T22:32:05.033 回答
0

Try this, although it is same with what you're already using:

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

I don't get though why do you have to use entire body element and not narrow it down to text nodes (p, h[..], ul, ol etc.)

And I agree with @David Thomas - it would be easier to see a test page you're working on.

于 2012-07-03T21:16:33.210 回答