3 سال پیش
641

چگونه انتخاب کردن متن در CSS را غیر فعال کنیم؟

چگونه انتخاب کردن متن در CSS را غیر فعال کنیم؟

همونطور که میدونین با استفاده از نگه داشتن ماوس و حرکت دادن اون میتونین متن مورد نظرتون رو انتخاب کنید.

این ویژگی خیلی خوبه و کاربردهای زیادی داره ولی بعضی اوقات پیش میاد که نمیخوایم کاربران این کار رو انجام بدن و باعث به وجود اومدن مشکل یا زشت شدن رابط کاربری سایت ما میشه.

در این مطلب میخوایم روش غیرفعال کردن انتخاب کردن متن با استفاده از CSS رو آموزش بدیم.

مثلا فرض کنید که یک لینک داریم که شبیه به دکمه عمل میکنه یا تب بندی و … و نمیخوایم متن این موارد قابل انتخاب شدن باشه. پس در ادامه با ما همراه باشید.

 

استفاده از ویژگی user-select

با استفاده از ویژگی user-select میتونیم رفتار انتخاب کردن متن توسط کاربر رو مشخص کنیم.

اگر سایت Caniuse رو مشاهده کنید خواهید دید که مرورگرهای مختلف پشتیبانی نسبتا خوبی از این ویژگی دارند ولی هنوز هم باید از Prefix استفاده کرد.

این ویژگی در بعضی از مرورگرهای قدیمی مثل IE9 به قبل پشتیبانی نمیشه.

که میتونین در این مواقع در صورت نیاز از Javascript کمک بگیرید و انتخاب شدن متن رو غیر فعال کنید.

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

میبینید که یک کلاس بنام noselect تعریف کردیم و در اون prefixهای مختلف برای مرورگرهای موجود رو قرار دادیم.

همونطور که مشاهده میکنید برای iOS Safari از ویژگی touch-callout نیز استفاده شده است.

برای مرورگرهای به روز opera و chrome نیازی نیست که از Prefix استفاده بشه.

حالا شما میتونین از این کلاس بصورت زیر در کدهای HTML خودتون استفاده کنید:

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

متن پاراگراف اول رو میتونین انتخاب کنید ولی چون به پاراگراف دوم کلاس noselect رو نسبت دادیم، دیگه قابل انتخاب کردن نیست و متن اون Highlight نمیشه.

اگر شما هم مظلب جالبی در این موارد در بخش نظرات و پیشنهادات برای ما ارسال کنید.

امیدوارم این مطلب مورد پسند شما باشه ،موفق باشید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب پر بازدید

ش
شیائومی،شیائومی در ایران،موبایل های شیائومی،برند شیائومی،لاک شدن موبایل های شیائومی در ایران،پشتیبان های شیائومی در ایران

محدود کردن گوشی های شیائومی در ایران – موبایل های شیائومی قفل میشوند؟

چند روز پیش کاربری در کوبا که موبایل شیائومی داشت گزارش کرده بود که موبایل او به طرز عجیبی قفل شده است. از دیروز خبر قفل شدن موبایل های شیائومی در ایران هم گذاشته شده است. دیروز در سایت XDA...

نصب ابزارهای کالی لینوکس روی سایر توزیع های دبیان،نصب ابزارهای کالی لینوکس

نصب ابزارهای کالی لینوکس روی سایر توزیع های دبیان(اوبونتو،مینت و …)

آموزش،ترفند،آموزش اتصال قالب،قالب های HTML،HTML،HTML و PHP، آموزش اتصال HTML به PHP انواع روش های اتصال HTML به PHP

آموزش اتصال قالب HTML به PHP

19ترفند گوگل،مرورگر،قابلیت های سرچ گوگل،ترفند گوگل،چگونه سرچ کنیم،قابلیت های گوگل که نمیدانیم

چرا گوگل بهترین موتور جست‌‌ و جو جهان شده؟

آموزش 2 ترفند مخفی ویندوز 10،آموزش 2 ترفند مخفی ویندوز 10

آموزش ۲ ترفند مخفی ویندوز ۱۰