วิธีปิดการเลือกข้อความโดยใช้ jQuery

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+ 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)

ต่อไปนี้จะปิดการเลือก 'รายการ' คลาสทั้งหมดในเบราว์เซอร์ทั่วไปทั้งหมด (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()) ในbodyและhtmlแท็ก คุณสามารถเปลี่ยนองค์ประกอบได้อย่างง่ายดายเพียงแค่เปลี่ยนข้อความที่อยู่ในระหว่างเครื่องหมายคำพูดทั้งสอง (เช่นเปลี่ยน$('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+aและCtrl+c. การทดสอบ: Cmd+aและCmd+c)

เช่นกันโดยใช้ส่วนของคำตอบของ Vladimir ด้านบน (ไปที่โพสต์ของเขาที่นี่ )

โซลูชัน 1 บรรทัดสำหรับโครม:

body.style.webkitUserSelect = "none";

และ FF:

body.style.MozUserSelect = "none";

IE ต้องการการตั้งค่าคุณลักษณะ "ไม่สามารถเลือกได้" (รายละเอียดด้านล่าง)

ฉันทดสอบสิ่งนี้ใน Chrome แล้วก็ใช้งานได้ คุณสมบัตินี้ได้รับการสืบทอดดังนั้นการตั้งค่าองค์ประกอบร่างกายจะปิดใช้งานการเลือกในเอกสารทั้งหมดของคุณ

รายละเอียดที่นี่: http://help.dottoro.com/ljrlukea.php

หากคุณกำลังใช้การปิดอยู่ให้เรียกใช้ฟังก์ชันนี้:

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>สำหรับข้อความที่คุณไม่ต้องการให้เลือก หากคุณมีความผูกพันกับclickเหตุการณ์ในบล็อกข้อความบางส่วนและไม่ต้องการให้ข้อความนั้นสามารถเลือกได้การเปลี่ยนเป็นปุ่มจะช่วยเพิ่มความหมายและป้องกันไม่ให้ข้อความถูกเลือก

<button>Text Here</button>

วิธีที่ดีที่สุดและง่ายที่สุดที่ฉันพบคือป้องกัน ctrl + c คลิกขวา ในกรณีนี้ฉันบล็อกทุกอย่างดังนั้นฉันจึงไม่ต้องระบุอะไรเลย

$(document).bind("contextmenu cut copy",function(e){
    e.preventDefault();
    //alert('Copying is not allowed');
});