วิธีปิดใช้งานการไฮไลต์การเลือกข้อความ

สำหรับแองเคอว่าการกระทำเช่นปุ่ม (ตัวอย่างเช่นคำถาม , แท็ก , ผู้ใช้อื่น ๆ ที่ด้านบนของหน้ากองมากเกิน) หรือแท็บจะมีวิธีการมาตรฐาน CSS เพื่อปิดการใช้งานไฮไลท์ผลหากผู้ใช้ตั้งใจเลือกข้อความ?

ฉันรู้ว่าสิ่งนี้สามารถทำได้ด้วย JavaScript และ googling เล็กน้อยให้-moz-user-selectตัวเลือกMozilla เท่านั้น

มีวิธีที่เป็นไปตามมาตรฐานเพื่อให้บรรลุนี้ด้วย CSS และถ้าไม่วิธีการ "ปฏิบัติที่ดีที่สุด" คืออะไร?

อัพเดทมกราคม, 2017:

ตามที่ฉันสามารถใช้ในuser-selectปัจจุบันได้รับการสนับสนุนในเบราว์เซอร์ทั้งหมดยกเว้น Internet Explorer 9 และรุ่นก่อนหน้า (แต่น่าเสียดายที่ยังคงต้องการคำนำหน้าผู้ขาย)

รูปแบบ CSS ที่ถูกต้องทั้งหมดคือ:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

โปรดทราบว่าuser-selectอยู่ในกระบวนการมาตรฐาน (ปัจจุบันอยู่ในร่างการทำงาน W3C ) ไม่รับประกันว่าจะทำงานได้ทุกที่และอาจมีความแตกต่างในการใช้งานระหว่างเบราว์เซอร์และในอนาคตเบราว์เซอร์สามารถรองรับการใช้งานได้

ข้อมูลเพิ่มเติมสามารถพบได้ในเอกสารเครือข่าย Mozilla Developer

ในเบราว์เซอร์ส่วนใหญ่สามารถทำได้โดยใช้รูปแบบที่เป็นกรรมสิทธิ์ในuser-selectคุณสมบัติCSS เดิมเสนอแล้วทิ้งใน CSS 3และตอนนี้เสนอในCSS UI ระดับ 4 :

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

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

สำหรับ Internet Explorer <10 และOpera <15 คุณจะต้องใช้unselectableคุณสมบัติขององค์ประกอบที่คุณต้องการยกเลิกการเลือก คุณสามารถตั้งค่านี้โดยใช้แอตทริบิวต์ใน HTML:

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

<div>น่าเศร้าที่สถานที่ให้บริการนี้จะไม่ได้รับการถ่ายทอดความหมายที่คุณต้องใส่แอตทริบิวต์ในแท็กเริ่มต้นขององค์ประกอบภายในทุก หากนี่เป็นปัญหาคุณสามารถใช้ JavaScript เพื่อทำสิ่งนี้ซ้ำสำหรับลูกหลานขององค์ประกอบ:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

อัปเดต 30 เมษายน 2557 : ทราเวิร์ทรีนี้จำเป็นต้องรันใหม่ทุกครั้งที่มีการเพิ่มองค์ประกอบใหม่ลงในทรี แต่ดูเหมือนว่าจากความคิดเห็นโดย @Han ว่าเป็นไปได้ที่จะหลีกเลี่ยงปัญหานี้โดยการเพิ่มmousedownตัวจัดการเหตุการณ์ที่กำหนดunselectableเป้าหมาย เหตุการณ์ ดูhttp://jsbin.com/yagekiji/1สำหรับรายละเอียด

สิ่งนี้ยังไม่ครอบคลุมถึงความเป็นไปได้ทั้งหมด แม้ว่าจะเป็นไปไม่ได้ที่จะเริ่มต้นการเลือกในองค์ประกอบที่ไม่สามารถเลือกได้ในบางเบราว์เซอร์ (เช่น Internet Explorer และ Firefox) ก็ยังเป็นไปไม่ได้ที่จะป้องกันการเลือกที่เริ่มต้นก่อนและสิ้นสุดหลังจากองค์ประกอบที่ไม่สามารถเลือกได้

โซลูชัน JavaScript สำหรับ Internet Explorer คือ:

onselectstart="return false;"

จนกว่าคุณสมบัติการเลือกของผู้ใช้ CSS 3 จะพร้อมใช้งานเบราว์เซอร์Gecko- based จะสนับสนุน-moz-user-selectคุณสมบัติที่คุณพบอยู่แล้ว เบราว์เซอร์ที่ใช้ WebKitและ Blink สนับสนุน-webkit-user-selectคุณสมบัติ

แน่นอนว่าไม่รองรับเบราว์เซอร์ที่ไม่ได้ใช้เครื่องมือแสดงผล Gecko

ไม่มี "มาตรฐาน" เป็นไปตามวิธีที่ง่ายและรวดเร็วในการทำ; ใช้ JavaScript เป็นตัวเลือก

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

ที่เดียวที่ฉันเห็นว่ามีประโยชน์คือถ้าคุณมีปุ่มสำหรับแบบฟอร์มที่ไม่ควรคัดลอกและวางหากผู้ใช้คัดลอกและวางเว็บไซต์

หากคุณต้องการปิดใช้งานการเลือกข้อความในทุกสิ่งยกเว้น<p>องค์ประกอบคุณสามารถทำได้ใน CSS (ระวังสิ่ง-moz-noneที่อนุญาตให้แทนที่ในองค์ประกอบย่อยซึ่งได้รับอนุญาตในเบราว์เซอร์อื่นด้วยnone):

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

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

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

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

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

คุณสามารถทำได้ใน Firefox และ Safari (Chrome ด้วยหรือไม่)

::selection { background: transparent; }
::-moz-selection { background: transparent; }

วิธีแก้ปัญหาสำหรับWebKit :

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

ฉันพบมันในตัวอย่าง CardFlip

ฉันชอบโซลูชัน CSS + jQuery แบบไฮบริด

ในการทำให้องค์ประกอบทั้งหมดภายใน<div class="draggable"></div>ไม่สามารถเลือกได้ให้ใช้ CSS นี้:

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

.draggable input {
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 }

และถ้าคุณใช้ jQuery ให้เพิ่มส่วนนี้ลงใน$(document).ready()บล็อก:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

ฉันคิดว่าคุณยังคงต้องการให้องค์ประกอบอินพุตใด ๆ สามารถโต้ตอบได้ดังนั้น:not()ตัวเลือกหลอก คุณสามารถใช้'*'แทนหากคุณไม่สนใจ

Caveat: Internet Explorer 9 อาจไม่ต้องการ jQuery ชิ้นพิเศษนี้ดังนั้นคุณอาจต้องการเพิ่มการตรวจสอบรุ่น

.hidden:after {
    content: attr(data-txt);
}

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

มันไม่ใช่วิธีที่ดีที่สุด

คุณสามารถใช้CSSหรือJavaScriptสำหรับสิ่งนั้น

JavaScriptวิธีที่ได้รับการสนับสนุนในเก่าเบราว์เซอร์เช่นเก่ารุ่นของ Internet Explorer เช่นกัน แต่ถ้ามันไม่ได้เป็นกรณีของคุณให้ใช้วิธี CSS แล้ว:

HTML / JavaScript:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML / CSS:

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

สำหรับ Internet Explorer ในนอกจากนี้คุณจะต้องเพิ่มระดับหลอกfocus (.ClassName: โฟกัส) outline-style: noneและ

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}

ลองแทรกแถวเหล่านี้ลงใน CSS และเรียกคุณสมบัติ "disHighlight" ที่ class:

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

การอัพเดทแฮ็คด่วน

หากคุณใช้ค่าnoneสำหรับuser-selectคุณสมบัติCSS ทั้งหมด(รวมถึงส่วนนำหน้าเบราว์เซอร์ของมัน) แสดงว่ามีปัญหาที่อาจเกิดขึ้นได้

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

ดังที่CSS-Tricksกล่าวว่าปัญหาคือ:

WebKitยังช่วยให้ข้อความที่จะคัดลอกถ้าคุณเลือกองค์ประกอบรอบ ๆ มัน

คุณสามารถใช้องค์ประกอบด้านล่างเพื่อenforceเลือกองค์ประกอบทั้งหมดซึ่งหมายความว่าหากคุณคลิกที่องค์ประกอบข้อความทั้งหมดที่อยู่ในองค์ประกอบนั้นจะถูกเลือก ทั้งหมดนี้ที่คุณต้องทำคือการเปลี่ยนค่าไปnoneall

.force-select {
    -webkit-user-select: all;  /* Chrome 49+     */
    -moz-user-select: all;     /* Firefox 43+    */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future  */
}

สำหรับผู้ที่มีปัญหาในการบรรลุเหมือนกันในเบราว์เซอร์ Android กับเหตุการณ์สัมผัสใช้:

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

หากคุณใช้LessและBootstrapคุณสามารถเขียน:

.user-select(none);

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

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

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

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

-webkit-user-select: none;
-moz-user-select: none;

onselectstart="return false;"

::selection { 
    background: transparent; 
}

::-moz-selection { 
    background: transparent; 
}

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

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

<div class="draggable"></div>

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

.draggable input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
 }

if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');

การทำงาน

CSS:

-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;

สิ่งนี้ควรใช้งานได้ แต่จะไม่สามารถใช้ได้กับเบราว์เซอร์รุ่นเก่า มีปัญหาความเข้ากันได้ของเบราว์เซอร์

ด้วยSASS (ไวยากรณ์ SCSS)

คุณสามารถทำได้ด้วยmixin :

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

ในแท็ก HTML:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

ลองใช้ในCodePenนี้

หากคุณใช้โปรแกรมแก้ไขอัตโนมัติคุณสามารถลบส่วนนำหน้าอื่นได้

ความเข้ากันได้เบราว์เซอร์ที่นี่

นอกเหนือจากคุณสมบัติเฉพาะ Mozilla เท่านั้นไม่มีวิธีปิดการเลือกข้อความด้วย CSS มาตรฐาน (ณ ตอนนี้)

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

วิธีนี้ใช้ได้ในเบราว์เซอร์บางตัว :

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

เพียงเพิ่มองค์ประกอบ / รหัสที่คุณต้องการต่อหน้าตัวเลือกคั่นด้วยเครื่องหมายจุลภาคโดยไม่มีช่องว่างเช่น:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

คำตอบอื่น ๆ จะดีกว่า; สิ่งนี้น่าจะถูกมองว่าเป็นทางเลือกสุดท้าย

สมมติว่ามีสองdivแบบนี้:

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}

<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

ตั้งค่าเคอร์เซอร์เป็นค่าเริ่มต้นเพื่อที่จะให้ความรู้สึกที่ไม่สามารถเลือกได้กับผู้ใช้

จำเป็นต้องใช้คำนำหน้าเพื่อรองรับในเบราว์เซอร์ทั้งหมด หากไม่มีคำนำหน้าสิ่งนี้อาจใช้ไม่ได้กับคำตอบทั้งหมด

สิ่งนี้จะเป็นประโยชน์หากไม่จำเป็นต้องเลือกสี:

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... การแก้ไขเบราว์เซอร์อื่น ๆ ทั้งหมด มันจะทำงานในInternet Explorer 9หรือใหม่กว่า

เพิ่มส่วนนี้ลงใน div แรกที่คุณต้องการปิดการเลือกข้อความ:

onmousedown='return false;' 
onselectstart='return false;'

บันทึก:

คำตอบที่ถูกต้องนั้นถูกต้องซึ่งทำให้คุณไม่สามารถเลือกข้อความได้ อย่างไรก็ตามมันไม่ได้ป้องกันคุณจากการคัดลอกข้อความอย่างที่ฉันจะแสดงกับภาพหน้าจอคู่ถัดไป (ณ วันที่ 7 พฤศจิกายน 2014)

อย่างที่คุณเห็นเราไม่สามารถเลือกหมายเลขได้ แต่เราสามารถคัดลอกได้

ทดสอบกับ: Ubuntu , Google Chrome 38.0.2125.111

เพื่อให้ได้ผลลัพธ์ที่ต้องการฉันพบว่าฉันต้องใช้ทั้งสองอย่าง::selectionและuser-select

input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}

ทำได้ง่ายด้วย:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

อีกวิธีหนึ่งคือ:

<h1 id="example">Hello, World!</h1>สมมติว่าคุณมี คุณจะต้องลบ innerHTML ของว่าh1ในกรณีนี้สวัสดีโลก จากนั้นคุณจะต้องไปที่ CSS และทำสิ่งนี้:

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

ตอนนี้ก็คิดว่ามันเป็นองค์ประกอบบล็อกและไม่ใช่ข้อความ

นี่ไม่ใช่ CSS แต่มันก็คุ้มค่าที่จะกล่าวถึง:

jQuery UI ปิดใช้งานการเลือก :

$("your.selector").disableSelection();

ตรวจสอบโซลูชันของฉันโดยไม่ใช้ JavaScript:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}

<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

ใช้เมนูป๊อปอัปที่มีเทคนิคของฉัน: http://jsfiddle.net/y4Lac/2/

แม้ว่าองค์ประกอบหลอกนี้จะอยู่ในร่างของ CSS Selectors ระดับ 3 แต่จะถูกลบออกในระหว่างขั้นตอนการแนะนำผู้สมัครเนื่องจากดูเหมือนว่าพฤติกรรมของมันจะมีการระบุน้อยเกินไปโดยเฉพาะอย่างยิ่งกับองค์ประกอบที่ซ้อนกันและการทำงานร่วมกันไม่ประสบความสำเร็จ

มันถูกกล่าวถึงในวิธี :: เลือกทำงานในองค์ประกอบที่ซ้อนกัน

แม้ว่าจะมีการใช้งานในเบราว์เซอร์คุณสามารถสร้างภาพลวงตาของข้อความที่ไม่ได้ถูกเลือกโดยใช้สีและสีพื้นหลังเดียวกันกับการเลือกของการออกแบบแท็บ (ในกรณีของคุณ)

การออกแบบ CSS ปกติ

p { color: white;  background: black; }

ในการคัดเลือก

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

การไม่อนุญาตให้ผู้ใช้เลือกข้อความจะทำให้เกิดปัญหาการใช้งาน