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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۱۱ اردیبهشت ۱۳۹۷

چگونه در 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 نمیشه.

برای مطالعه بیشتر در مورد این ویژگی میتونین این صفحه از MDN رو ببینید.

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

امیدوارم از این مطلب خوشتون اومده باشه.

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

 

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !