มีวิธีทำให้ DIV ไม่สามารถเลือกได้หรือไม่?

นี่คือคำถาม CSS ที่น่าสนใจสำหรับคุณ!

ฉันมี textarea ที่มีพื้นหลังโปร่งใสซ้อนทับข้อความบางส่วนที่ฉันต้องการใช้เป็นลายน้ำ ข้อความมีขนาดใหญ่และใช้พื้นที่ส่วนใหญ่ของ textarea มันดูดีปัญหาคือเมื่อผู้ใช้คลิกใน textarea บางครั้งมันก็เลือกข้อความลายน้ำแทน ฉันต้องการให้ข้อความลายน้ำไม่สามารถเลือกได้ ฉันคาดหวังว่าบางสิ่งที่ต่ำกว่าในดัชนี z มันจะไม่สามารถเลือกได้ แต่เบราว์เซอร์ดูเหมือนจะไม่สนใจเลเยอร์ z-index เมื่อเลือกรายการ มีกลอุบายหรือวิธีที่จะทำให้มันเป็น DIV นี้หรือไม่?

ผมเขียนนามสกุล jQuery ง่ายที่จะปิดการใช้งานตัวเลือกบางเวลากลับเลือกปิดการใช้งานใน jQuery คุณสามารถเรียกมันผ่าน$('.button').disableSelection();

อีกวิธีหนึ่งโดยใช้ CSS (ข้ามเบราว์เซอร์):

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

รหัส CSS ต่อไปนี้ใช้งานได้กับเบราว์เซอร์รุ่นใหม่:

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

สำหรับ IE คุณต้องใช้ JS หรือ attribute attribute ในแท็ก html

<div id="foo" unselectable="on" class="unselectable">...</div>

เพียงอัปเดตคำตอบที่ได้รับการโหวตมากดั้งเดิมของ aleemb ด้วยการเพิ่มไปยัง css

เราได้ใช้คอมโบต่อไปนี้:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

เรามีข้อเสนอแนะสำหรับการเพิ่มรายการ webkit-touch จาก:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2558 เม.ย. : เพียงอัปเดตคำตอบของฉันเองด้วยรูปแบบที่อาจมีประโยชน์ หากคุณต้องการทำให้ DIV สามารถเลือกได้ / ไม่สามารถเลือกได้ในทันทีและยินดีที่จะใช้Modernizr สิ่งต่อไปนี้จะทำงานในรูปแบบจาวาสคริปต์:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

ดังที่โยฮันเนสได้แนะนำไว้แล้วภาพพื้นหลังเป็นวิธีที่ดีที่สุดในการทำสิ่งนี้ใน CSS เพียงอย่างเดียว

โซลูชัน JavaScript จะต้องส่งผลกระทบต่อ "dragstart" เพื่อให้มีประสิทธิภาพในเบราว์เซอร์ยอดนิยมทั้งหมด

JavaScript:

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

รวย

คุณสามารถใช้pointer-events: none;ใน CSS ของคุณ

div {
  pointer-events: none;
}

คุณสามารถลองสิ่งนี้:

<div onselectstart="return false">your text</div>

รูปภาพพื้นหลังที่เรียบง่ายสำหรับพื้นที่ข้อความไม่เพียงพอหรือไม่

เบราว์เซอร์ WebKit (เช่น Google Chrome และ Safari) มีโซลูชัน CSS คล้ายกับ Mozilla -moz-user-select: none

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

นอกจากนี้ใน IOS หากคุณต้องการกำจัดการซ้อนทับกึ่งโปร่งใสสีเทาที่ปรากฏบนทัชสกรีนให้เพิ่ม css:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

ใช้

onselectstart = "return false"

มันป้องกันการคัดลอกเนื้อหาของคุณ

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

ไม่แน่ใจเกี่ยวกับกรณีการใช้งานของคุณ แต่คุณสามารถทำให้ลากได้