关于除了输入的所有东西都禁用选择[type = text] [英] disableSelection on everything but input[type=text]

问题描述

我有一个要求，除了input [type = text]元素之外的其他所有内容禁止在网页上进行选择。
$ b 这个接受的答案几乎可以解决这个问题，但它不会禁止选择包含input [type = text]元素的容器。因此，用户仍然可以通过从其中一个容器中启动拖动操作来进行选择。

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

@Pointy，为什么不先把它拿出来。 not（）call？

取出第一个 .not 将给出：

  $（'body'）。not（'input'）。disableSelection（）; 
  

正如链接问题所指出的，它仍然会禁用页面上的所有内容，包括输入
$ b

@David Thomas，你有现场演示...

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

• 使用 $（'body'）。not（'input'）。 disableSelection（）; selectiopn被禁用，包括输入元素在内的所有页面。 使用 $ $ （'body *'）。not（'：has（input）'）。not（'input'）。disableSelection（）; 所有不包含输入元素的元素。但是可以通过从包含输入元素的容器中开始拖动操作来选择整个页面。

>解决方案

我找到了一个解决方案，它可以做我想做的，并且会对jquery / javascript专家的评论/改进感兴趣。

  $（document）.ready（function（）{
 $（body）。disableSelection（）; 
 
 $ body））。delegate（'input [type = text]，textarea'，focus，function（）{
 $（body）。enableSelection（）; 
}）; 
 $ b $（body）。delegate（input [type = text]，textarea，blur，function（）{
 $（body）。disableSelection（）; 
}）; 
}）; 
  

当文本框（input [type = text]或textarea）具有焦点时，鼠标只能选择文本框内的文本。因此，在文本框具有焦点（在焦点和模糊事件之间）时启用对整个页面的选择是安全的。

在文本框之间进行切换时， IE8 / 9。 Google Chrome浏览器不太明显，我知道它具有更快的JavaScript引擎。所以我可以接受性能的提升，特别是IE10将会有一个更快的JavaScript引擎。

更新

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

  Sys.Application.add_load（function（）{
 $（body）。disableSelection（）; 
}）; 
  

I have a requirement to disable selection on a web page for everything except input[type=text] elements.

This accepted answer to a similar question almost does the trick, but it doesn't disable selection for containers that contain input[type=text] elements. Therefore the user can still select by starting a drag operation from within one of these containers.

Is this even possible, i.e. is it possible to disable selection for a container element, while enabling it for child elements (specifically, child input=text elements).

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

Taking out the first .not call, will give:

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

which, as pointed out in the linked question, will still disable everything on the page, including the input[type=text] elements.

@David Thomas, "Do you have a live demo ..."

I don't have a live demo, but it's fairly trivial. For example, a div with a bit of padding that contains an input[type=text] element. The result is:

• With $('body').not('input').disableSelection(); selectiopn is disabled for all the page, including the input elements.

• With $('body *').not(':has(input)').not('input').disableSelection(); selection is disabled for all elements that don't contain an input element. But it is possible to select the whole page by starting a drag operation from within a container that contains an input element.

解决方案

I've found a solution that appears to do what I want, and would be interested in comments / improvements from jquery / javascript experts.

$(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();
    });
});

When a textbox (input[type=text] or textarea) has the focus, then dragging with the mouse only selects text within the textbox. Therefore it's "safe" to enable selection for the whole page while a textbox has focus (between focus and blur events).

There is a noticeable delay when tabbing between textboxes on IE8/9. It's not noticeable on Google Chrome, which I understand has a faster javascript engine. So I can live with the performance hit, especially since IE10 is going to have a faster javascript engine.

UPDATE

When using ASP.NET UpdatePanel, this needs to be modified to disable selection after each partial postback:

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

这篇关于关于除了输入的所有东西都禁用选择[type = text]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！