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

2020/10/17 12:41 · javascript ·  · 0评论

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

在jQuery 1.8中,可以如下进行操作:

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

如果您使用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; });

我发现此答案(防止文本表突出显示)最有帮助,也许可以将其与提供IE兼容性的另一种方式结合使用。

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

这是断开选择和取消某些热键(例如Ctrl+aCtrl+的更全面的解决方案c测试: Cmd +aCmd+ 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)

以下内容将禁用所有常见浏览器(IE,Chrome,Mozilla,Opera和Safari)中所有类“项目”的选择:

$(".item")
        .attr('unselectable', 'on')
        .css({
            'user-select': 'none',
            'MozUserSelect': 'none'
        })
        .on('selectstart', false)
        .on('mousedown', false);
        $(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");
        });

使用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>

这实际上非常简单。要禁用文本选择(以及单击并拖动文本(例如Chrome中的链接)),只需使用以下jQuery代码:

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

这一切都是为了防止mousedown()bodyhtml标签中用鼠标(单击时发生默认设置你可以很容易只是通过改变文本之间的两个引号(如改变而改变的元素$('body, html'),以$('#myUnselectableDiv')使myUnselectableDivDIV是,好了,不可选。

快速的片段向您展示/证明这一点:

$('#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>

请注意,这种效果并不完美,在使整个窗口无法选择的同时效果最佳。您可能还想添加

取消某些热键(例如Ctrl+aCtrl+c测试: Cmd+aCmd+c

同样,通过使用以上弗拉基米尔答案的这一部分。在这里找到他的帖子

1条用于CHROME的解决方案:

body.style.webkitUserSelect = "none";

和FF:

body.style.MozUserSelect = "none";

IE需要设置“ unselectable”属性(详细信息在底部)。

我在Chrome浏览器中对此进行了测试,并且可以正常工作。此属性是继承的,因此在body元素上设置该属性将禁用整个文档中的选择。

此处的详细信息:http : //help.dottoro.com/ljrlukea.php

如果您使用的是Closure,只需调用此函数:

goog.style.setUnselectable(myElement, true);

它透明地处理所有浏览器。

非IE浏览器的处理方式如下:

goog.style.unselectableStyle_ =
    goog.userAgent.GECKO ? 'MozUserSelect' :
    goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
    null;

在此处定义:http : //closure-library.googlecode.com/svn/! svn/ bc/4/trunk/ closure/ goog/ docs/
closure_goog_style_style.js.source.html

IE部分的处理方式如下:

if (goog.userAgent.IE || goog.userAgent.OPERA) {
// Toggle the 'unselectable' attribute on the element and its descendants.
var value = unselectable ? 'on' : '';
el.setAttribute('unselectable', value);
if (descendants) {
  for (var i = 0, descendant; descendant = descendants[i]; i++) {
    descendant.setAttribute('unselectable', value);
  }
}

我认为这段代码可在所有浏览器上使用,并且所需的开销最少。它实际上是上述所有答案的混合体。如果您发现错误,请告诉我!

添加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();

我已经尝试了所有方法,而这对我来说是最简单的,因为我使用的是IWebBrowser2,并且没有10种浏览器可以应对:

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

非常适合我!

在适当情况下,一种解决方案是对<button>您不想选择的文本使用a 如果您要绑定到click某个文本块上事件,并且不希望该文本是可选择的,则将其更改为按钮会改善语义,并且还会阻止选择文本。

<button>Text Here</button>

我发现它的最好和最简单的方法是防止ctrl + c,右键单击。在这种情况下,我屏蔽了所有内容,因此无需指定任何内容。

$(document).bind("contextmenu cut copy",function(e){
    e.preventDefault();
    //alert('Copying is not allowed');
});
本文地址:http://javascript.askforanswer.com/ruheshiyongjqueryjinyongwenbenxuanze.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!