css - كيفية تعطيل تحديد اختيار النص؟




cross-browser highlighting (20)

أضف هذا إلى div الأول الذي تريد تعطيل التحديد للنص:

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

بالنسبة للمراسي التي تعمل مثل الأزرار (على سبيل المثال ، الأسئلة والعلامات والمستخدمون وما إلى ذلك في أعلى صفحة Stack Overflow) أو علامات التبويب ، هل توجد طريقة قياسية في CSS لتعطيل تأثير التمييز إذا اختار المستخدم النص عن طريق الخطأ؟

أدرك أنه يمكن إجراء ذلك باستخدام جافا سكريبت ، وأفضى القليل من googling إلى خيار Mozilla-only -moz-user-select .

هل هناك طريقة متوافقة معيارية لتحقيق ذلك باستخدام CSS ، وإذا لم يكن الأمر كذلك ، فما هو منهج "أفضل الممارسات"؟


أنا أحب الحل المختلط CSS + jQuery.

لجعل جميع العناصر الموجودة داخل <div class="draggable"></div> غير قابلة للإلغاء ، استخدم CSS هذا:

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-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() pseudo-selector. يمكنك استخدام '*' بدلاً من ذلك إذا كنت لا تهتم.

التحذير: قد لا يحتاج IE9 إلى هذه القطعة الإضافية من jQuery ، لذا قد ترغب في إضافة إصدار للتحقق هناك.


إذا كنت تستخدم Less و Bootstrap يمكنك كتابة:

.user-select(none);

افترض أن هناك قسمين مثل هذا

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/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>

تعيين المؤشر على الإعداد الافتراضي بحيث يمنح المستخدم /

يجب استخدام البادئة لدعمها في جميع المتصفحات بدون بادئة ، وقد لا يعمل ذلك في جميع الإجابات.


بالنسبة لبرنامج Internet Explorer بالإضافة إلى ذلك ، تحتاج إلى إضافة التركيز على فئة زائفة (.ClassName: focus) ونمط المخطط التفصيلي: لا شيء .

.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;/*IE*/
}

بصرف النظر عن خاصية Mozilla-only ، لا ، لا توجد طريقة لتعطيل تحديد النص باستخدام CSS القياسي فقط (حتى الآن).

إذا لاحظت ، لا يقوم بتعطيل اختيار النص لأزرار التنقل الخاصة بهم ، وأوصي بعدم القيام بذلك في معظم الحالات ، نظرًا لأنه يعدل سلوك التحديد العادي ويجعله يتعارض مع توقعات المستخدم.


حتى تصبح خاصية user-select في CSS 3 متاحة ، تدعم المتصفحات -moz-user-select Gecko خاصية -moz-user-select التي وجدتها بالفعل. تدعم مستعرضات WebKit و Blink خاصية -webkit-user-select .

هذا بالطبع غير مدعوم في المتصفحات التي لا تستخدم محرك تقديم جيكو.

لا توجد طريقة سريعة وسهلة متوافقة مع المعايير. استخدام جافا سكريبت هو خيار.

والسؤال الحقيقي هو ، لماذا تريد أن لا يكون المستخدمون قادرين على إبراز بعض العناصر ولصقه ونسخها؟ لم أتعرض لوقت واحد رغبت في عدم السماح للمستخدمين بتمييز جزء معين من موقعي على الويب. العديد من أصدقائي ، بعد أن أمضوا العديد من الساعات في القراءة والكتابة ، سيستخدمون ميزة التمييز كطريقة لتذكر المكان الذي توجد فيه على الصفحة ، أو تقديم علامة بحيث تعرف أعينهم أين يجب أن ينظروا في الخطوة التالية.

المكان الوحيد الذي يمكنني أن أرى فيه هذا الأمر مفيدًا إذا كان لديك أزرار للنماذج التي لا ينبغي نسخها ولصقها إذا قام مستخدم بنسخ موقع الويب ولصقه.


حل جافا سكريبت ل IE هو

onselectstart="return false;"

على الرغم من أن هذا العنصر الزائف كان في مسودات المستوى 3 من CSS Selectors ، فقد تمت إزالته خلال مرحلة توصية المرشح ، حيث بدا أن سلوكه كان غير محدد بشكل خاص ، خاصة مع العناصر المتداخلة ، ولم يتم تحقيق قابلية التشغيل البيني.

تتم مناقشته في كيفية عمل الخيار "اختيار ::" على العناصر المتداخلة .

على الرغم من أنه يتم تنفيذه في المستعرض ، يمكنك جعل وهم من النص لا يتم تحديده باستخدام نفس اللون ولون الخلفية على التحديد من تصميم علامة التبويب (في حالتك).

تصميم عادي CSS

p { color: white;  background: black; }

على الاختيار

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

سيؤدي عدم السماح للمستخدمين بتحديد النص إلى زيادة مشكلات قابلية الاستخدام.


في اختيار الحلول أعلاه ، يتم إيقاف التحديد ، ولكن المستخدم لا يزال يعتقد أنه يمكنك تحديد النص لأن المؤشر لا يزال يتغير. للاحتفاظ بها ثابتة ، سيتعين عليك تعيين مؤشر 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>

سيؤدي هذا إلى جعل النص الخاص بك مستويًا تمامًا ، كما لو كان في تطبيق سطح المكتب.


لأولئك الذين لديهم مشكلة في تحقيق نفس الشيء في متصفح 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;
}

لقد تعلمت من موقع CSS-Tricks .

user-select: none;

وهذا أيضا:

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


هذا يعمل في بعض المتصفحات:

::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;}

الاجابات الاخرى افضل. ربما ينبغي النظر إلى هذا كملاذ أخير / catchall.


يمكنك فعل ذلك في Firefox و Safari (Chrome أيضًا؟)

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

التحديث في كانون الثاني 2017:

طبقًا لـ يمكنني استخدامها ، user-select خيار 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; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

لاحظ أنها ميزة غير قياسية (أي ليست جزءًا من أي مواصفات). ليس من المضمون العمل في كل مكان ، وقد تكون هناك اختلافات في التنفيذ بين المتصفحات وفي المستقبل يمكن للمتصفحات إسقاط الدعم لها.

يمكن العثور على مزيد من المعلومات في وثائق شبكة مطوري برامج Mozilla .


تحديث سريع للاختراق: آذار 2017 - من CSS-Tricks

إذا وضعت القيمة "لا شيء" لكل سمات تحديد مستخدم CSS كما هو موضح أدناه ، فهناك مشكلة يمكن أن يحدث بها هذا.

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

كما يقول CSS-Tricks أن المشاكل هي

  • ما زال WebKit يسمح بنسخ النص إذا قمت بتحديد عناصر حوله.

لذا يمكنك أيضًا استخدام الجزء أدناه بدلاً منه لفرض تحديد عنصر بالكامل وهو الحل للمشكلة. كل ما عليك فعله هو تغيير القيمة "لا شيء" إلى "الكل" التي ستبدو هكذا

.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 */   
}

ملحوظة:

الإجابة الصحيحة صحيحة لأنها تمنعك من تحديد النص. ومع ذلك ، فإنه لا يمنعك من القدرة على نسخ النص ، كما سأعرض مع الصورتين التاليتين (اعتبارًا من 7 نوفمبر 2014).

كما ترى ، لم نتمكن من تحديد الأرقام ، ولكن تمكنا من نسخها.

تم الاختبار على: Ubuntu ، Google Chrome 38.0.2125.111.


.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

إنها ليست الطريقة الأفضل ، على الرغم من ذلك.


-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');




textselection