هل هناك طريقة لجعل النص unselectable على صفحة HTML?[مكررة]

Question

هذا السؤال سبق الجواب هنا:

• كيفية تعطيل اختيار النص تسليط الضوء ؟ 40 إجابات

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

وأنا قد تكون قادرة على حل هذه مع جافا سكريبت خدعة (أود أن أرى تلك الإجابات أيضا) -- ولكن أنا آمل حقا هناك شيء في CSS/HTML مباشرة يعمل على جميع المتصفحات.

Answer 1

في معظم المتصفحات ، ويمكن تحقيق ذلك باستخدام CSS:

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

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

IE < 10 و اوبرا, سوف تحتاج إلى استخدام unselectable سمة من العنصر الذي ترغب في أن تكون unselectable.يمكنك تعيين هذا باستخدام سمة في HTML:

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

للأسف هذه الخاصية ليست موروثة ، مما يعني أنه يجب أن يضع سمة في بداية الوسم من كل عنصر داخل <div>.إذا كان هذا هو المشكلة ، يمكنك بدلا من ذلك استخدام جافا سكريبت أن تفعل هذا بشكل متكرر على عنصر أحفاد:

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

Answer 2

<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") //IE route
        target.onselectstart=function(){return false}

    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
        target.style.MozUserSelect="none"

    else //All other route (ie: Opera)
        target.onmousedown=function(){return false}

    target.style.cursor = "default"
}



//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"


</script>

تحرير

رمز يأتي على ما يبدو من http://www.dynamicdrive.com

Answer 3

كل الصحيحة CSS الاختلافات هي:

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

Answer 4

جرب هذا:

<div onselectstart="return false">some stuff</div>

بسيطة لكنها فعالة...يعمل في الإصدارات الحالية من جميع المتصفحات الرئيسية.

Answer 5

لفايرفوكس يمكنك تطبيق CSS إعلان "-moz-user-select" إلى "لا شيء".التحقق من الوثائق ، المستخدم-اختر.

إنه "معاينة" المستقبل "المستخدم-اختر" كما يقولون ، لذلك ربما أوبرا أو بكتالقائم على المتصفحات تدعم ذلك.أنا أذكر أيضا العثور على شيء Internet Explorer, ولكن لا أتذكر ما :).

على كل حال إلا حالة معينة حيث النص-اختيار يجعل بعض وظائف حيوية تفشل ، لا يجب أن تتجاوز ما المستخدمين يتوقعون من صفحة ويب ، هو أن تكون قادرة على تحديد أي نص يريدون.

Answer 6

أنا وجدت بعض مستوى من النجاح مع CSS هو موضح هنا http://www.quirksmode.org/css/selection.html:

::selection {
    background-color: transparent;
}

انه تولى معظم المسائل التي كنت أعاني مع بعض رولر ul العناصر في الهواء تطبيق (محرك بكت).لا يزال الحصول على صغيرة (تقريبا.15 × 15) التصحيح من العدم أن يحصل المحدد ، ولكن نصف صفحة تم اختياره من قبل.

Answer 7

تماما موقف divs على مساحة النص مع z-index العالي وإعطاء هذه divs شفافة GIF خلفية الرسم.

ملاحظة بعد أكثر قليلا من التفكير - كنت في حاجة الى هذه 'يغطي' أن تكون مرتبطة حتى النقر عليها سوف يأخذك إلى حيث التبويب كان من المفترض أن, مما يعني أنك يمكن أن تفعل هذا مع مرساة عنصر تعيين display:box, والعرض والارتفاع تعيين فضلا عن صورة خلفية شفافة.

Answer 8

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

Answer 9

على سفاري ، -khtml-user-select: none, مثل موزيلا -moz-user-select (أو في جافا سكريبت ، target.style.KhtmlUserSelect="none";).

Answer 10

"إذا كان المحتوى الخاص بك هو حقا مثيرة للاهتمام ، ثم هناك القليل الذي يمكن أن في نهاية المطاف هل لحمايته"

هذا صحيح ، لكن معظم النسخ في تجربتي ، لا علاقة له مع "نهاية المطاف" أو المهوسون أو تحديد plagiarists أو أي شيء مثل ذلك.انها عادة ما تكون نسخ عادية من قبل جاهل الناس ، حتى بسيطة هزم بسهولة حماية (هزم بسهولة من قبل الناس مثلنا ، أن) يعمل بشكل جيد جدا لوقفها.أنهم لا يعرفون أي شيء عن "عرض المصدر" أو مخابئ أو أي شيء آخر...هيك هم لا يعرفون حتى ما مستعرض ويب أو أنهم باستخدام واحدة.

Answer 11

هنا ساس mixin (scss) للراغبين. البوصلة/CSS 3 لا يبدو أن يكون المستخدم-اختر mixin.

// @usage use within a rule
// ex. img {@include user-select(none);}
// @param assumed valid user-select value
@mixin user-select($value)
{
    & {
        -webkit-touch-callout: $value;
        -webkit-user-select: $value;
        -khtml-user-select: $value;
        -moz-user-select: $value;
        -ms-user-select: $value;
        user-select: $value;
    }
}

على الرغم من البوصلة أن تفعل ذلك في وسيلة أكثر قوة ، أيفقط إضافة دعم الباعة الذي اخترته.

Answer 12

إذا كان يبدو سيئا يمكنك استخدام CSS لتغيير مظهر من المقاطع المحددة.

Answer 13

أي جافا سكريبت أو CSS أسلوب التحايل بسهولة مع الحرائق (مثل فليكر حالة).

يمكنك استخدام ::selection الزائفة عنصر في CSS تغيير لون الضوء.

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

Answer 14

هناك العديد من المناسبات عند إيقاف selectability يعزز تجربة المستخدم.

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

Answer 15

الصور يمكن أن يكون محددا جدا.

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

Answer 16

الأعمال التالية في فايرفوكس ومن المثير للاهتمام بما فيه الكفاية إذا كنت إزالة كتابة الخط لا يعمل.أي شخص لديه أي فكرة لماذا كتابة الخط هو مطلوب.

<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>