如何使用jQuery禁用文本选择？

Question

jQuery或jQuery-UI是否具有禁用指定文档元素的文本选择功能？

- Dawid Ohia

---

可能是重复问题：https://dev59.com/9XM_5IYBdhLWcg3wlEFH - Jørn Schou-Rode

@John：上面的链接是否回答了你的问题？如果没有，你可能需要提供更多细节来说明你的情况有何不同。 - Jørn Schou-Rode

是的，它确实有这个功能。但尽管答案相同，那个问题很具体，所以许多人可能会忽略那个答案，因为他们关注的是更一般的问题（就像我一样）。 - Dawid Ohia

@Jhon：另一个问题也有jQuery的解决方案。 - Omar Abid

Answer 1

在jQuery 1.8中，可以按照以下方式完成此操作：

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);

- SLaks

---

我很清楚那件事。 - SLaks

@Bryce：最好不要这样做。http://blog.slaks.net/2010/12/on-copy-prevention-in-html-part-2.html http://blog.slaks.net/2010/12/on-copy-prevention-in-html-part-3.html - SLaks

感谢这个。我正在制作一个拖动滑块，并需要一种方法来避免在过程中选择文本。 - Spencer Ruport

@Mottie：错了；jQuery会自动完成这个操作。请查看编辑历史记录。 - SLaks

对于那些建议“只需不要”禁用文本选择（或其他任何SO相关事项）的人，稍微开放一下你们的思维吧。通常人们禁用它是出于美观方面的考虑，例如避免在双击带文本标签时进行文本选择等。所以，请回答问题，或者提供实际的反驳观点并指明你想要否定什么，不要只是笼统地概括这个想法。 - dudewad

Answer 2

如果你使用jQuery UI，那么有一个专门的方法来处理这个问题，但它只能处理鼠标选择（即CTRL+A仍然有效）：

$('.your-element').disableSelection(); // deprecated in jQuery UI 1.9

如果你不想使用jQuery UI，那么这段代码非常简单：

$(el).attr('unselectable','on')
     .css({'-moz-user-select':'-moz-none',
           '-moz-user-select':'none',
           '-o-user-select':'none',
           '-khtml-user-select':'none', /* you could also put this in a class */
           '-webkit-user-select':'none',/* and add the CSS class here instead */
           '-ms-user-select':'none',
           'user-select':'none'
     }).bind('selectstart', function(){ return false; });

- Damien

---

jQuery UI的功能很好，但它并不提供同样级别的保护。它确实可以防止直接选择物品，但如果您从另一个DOM对象中携带了选择，则还需要CSS规则。以下是该函数=function () { return this.bind(($.support.selectstart ? "selectstart" : "mousedown") + ".ui-disableSelection", function(event) { event.preventDefault(); }); } - chrismarx

请注意，disableSelection()在jQuery UI 1.9中已被弃用。 - mar10

根据您的浏览器不同，它可能还需要 .on('mousedown', false) 才能正常工作。然而，默认情况下禁用 mousedown 事件可能会破坏现有功能，因此这样做是危险的。 - Dan

哎，这真让人烦恼，它被淘汰了。有时候你确实需要用到它呢。 - Chuck Le Butt

我正在为一些锚文本创建右键上下文菜单，我不希望在单击时选择文本。所以是的，@Monk，这将被视为一个合法的例子。 - Wayne Smallman

在jQuery的.css()方法中，我们是否仍需要包含供应商前缀？ - Ari

Answer 3

我发现这个答案（Prevent Highlight of Text Table）非常有帮助，也许可以与提供IE兼容性的另一种方法结合使用。

#yourTable
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

- Plynx

---

Chrome使用-webkit-user-select。 - tim

始终欣赏CSS的做事方式，而不是使用jQuery或JS。就像jQuery动画与CSS转换一样，内置于浏览器中的方式始终是最好和最有效的。 - Brian Leishman

Answer 4

这里是更全面的解决方案，能够处理断开选择和取消一些快捷键的操作（例如Ctrl+a和Ctrl+c)。测试: Cmd+a和Cmd+c）

(function($){

  $.fn.ctrlCmd = function(key) {

    var allowDefault = true;

    if (!$.isArray(key)) {
       key = [key];
    }

    return this.keydown(function(e) {
        for (var i = 0, l = key.length; i < l; i++) {
            if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
                allowDefault = false;
            }
        };
        return allowDefault;
    });
};


$.fn.disableSelection = function() {

    this.ctrlCmd(['a', 'c']);

    return this.attr('unselectable', 'on')
               .css({'-moz-user-select':'-moz-none',
                     '-moz-user-select':'none',
                     '-o-user-select':'none',
                     '-khtml-user-select':'none',
                     '-webkit-user-select':'none',
                     '-ms-user-select':'none',
                     'user-select':'none'})
               .bind('selectstart', false);
};

})(jQuery);

并调用示例：

$(':not(input,select,textarea)').disableSelection();

jsfiddle.net/JBxnQ/

这可能对于旧版本的FireFox来说还不够（我无法确定是哪个版本）。如果以上方法都不起作用，请添加以下内容：

.on('mousedown', false)

- Vladimir

---

你为什么要两次调用 attr('unselectable', 'on')？这是一个打字错误还是有用的操作？ - KajMagnus

这对我非常有效，但是对于我的特定Web应用程序（JQuery Mobile），我必须禁用“.each(function() { $(this).attr('unselectable','on') .bind('selectstart',function(){ return false; }); });”部分，以防万一有所帮助。 - Anthony

Answer 5

以下代码将禁用所有浏览器（IE、Chrome、Mozilla、Opera和Safari）中所有类名为“item”的元素的选择：

```css .item { user-select: none; } ```

$(".item")
        .attr('unselectable', 'on')
        .css({
            'user-select': 'none',
            'MozUserSelect': 'none'
        })
        .on('selectstart', false)
        .on('mousedown', false);

- Arvid Vermote

---

不复杂 - 太好了！谢谢。对于禁用查找；我添加了 .attr('disabled', 'disabled')。 - freewill

更新：我使用了 .attr('readonly', 'readonly') 代替 .attr('disabled', 'disabled')。使用 disabled 会阻止在MVC中提交我的模型变量（模型变量为null）。而使用 readonly，它看起来仍然像是 disabled（我使用的是bootstrap），但它允许提交项目值。 - freewill

太棒了，我使用这段代码来替换“pointer-events: none;”，因为在IE 11中它不起作用。问候。 - Shortys Oberto Dutari

Answer 6

这其实非常简单。 要禁用文本选择（以及点击+拖动文本（例如在Chrome中的链接），只需使用以下jQuery代码：

$('body, html').mousedown(function(event) {
    event.preventDefault();
});

这只是在你用鼠标点击(mousedown())body和html标签时，防止默认事件的发生。你可以通过改变两个引号之间的文本(例如将$('body, html')更改为$('#myUnselectableDiv')，使myUnselectableDiv div不能被选择。

以下是一个快速示例以向您展示/证明这一点:

$('#no-select').mousedown(function(event) {
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="no-select">I bet you can't select this text, or drag <a href="#">this link</a>, </span>
<br/><span>but that you can select this text, and drag <a href="#">this link</a>!</span>

请注意，这种效果并不完美，并且在使整个窗口不可选择时表现最佳。您可能还想通过使用Vladimir答案中的那一部分来添加一些热键的取消（例如Ctrl+a和Ctrl+c）。 （测试：Cmd+a和Cmd+c）。请点击此处查看他的帖子。）

- Zach Barham

Answer 7

        $(document).ready(function(){
            $("body").css("-webkit-user-select","none");
            $("body").css("-moz-user-select","none");
            $("body").css("-ms-user-select","none");
            $("body").css("-o-user-select","none");
            $("body").css("user-select","none");
        });

- deerhunter

---

除了代码，您能否写一个简短的答案摘要？ - jonsca

Answer 8

这可以通过 JavaScript 轻松完成，适用于所有浏览器。

<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function disableSelection(target){
if (typeof target.onselectstart!="undefined") //For IE 
    target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
    target.style.MozUserSelect="none"
else //All other route (For Opera)
    target.onmousedown=function(){return false}
target.style.cursor = "default"
}
 </script>

调用此函数。

<script type="text/javascript">
   disableSelection(document.body)
</script>

- Code Spy

---

这个很棒！但是我们如何停止对它的“聚焦”？ - mutanic

此答案已经过时，截止于2013年。 - Dan

Answer 9

我尝试过所有方法后，这个方法对我来说最简单，因为我正在使用IWebBrowser2，没有10个浏览器需要处理：

document.onselectstart = new Function('return false;');

对我来说完美地工作！

- Dave

Answer 10

我认为这段代码适用于所有浏览器，并且需要的开销最小。它实际上是以上所有答案的混合体。如果你发现了一个 bug，请告诉我！

添加 CSS：

.no_select { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select:none;}

添加jQuery：

(function($){
    $.fn.disableSelection = function() 
    {       
        $(this).addClass('no_select');              
        if($.browser.msie)
        {
            $(this).attr('unselectable', 'on').on('selectstart', false);            
        }
    return this;            
};
})(jQuery);

可选：如果您想禁用所有子元素的选择，您可以将IE块更改为：

$(this).each(function() {
    $(this).attr('unselectable','on')
    .bind('selectstart',function(){ return false; });
});

用法：

$('.someclasshere').disableSelection();

- Justin