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



visibility  
mode_comment   ۰

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

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

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

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

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

با استفاده از ویژگی user-select میتونیم رفتار انتخاب کردن متن توسط کاربر رو مشخص کنیم. اگر سایت Caniuse رو مشاهده کنید خواهید دید که مرورگرهای مختلف پشتیبانی نسبتا خوبی از این ویژگی دارند ولی هنوز هم باید از Prefix استفاده کرد. این ویژگی در بعضی از مرورگرهای قدیمی مثل IE9 به قبل پشتیبانی نمیشه که میتونین در این مواقع در صورت نیاز از Javascript کمک بگیرید و انتخاب شدن متن رو غیر فعال کنید.

میبینید که یک کلاس بنام noselect تعریف کردیم و در اون prefix های مختلف برای مرورگرهای موجود رو قرار دادیم. همونطور که مشاهده میکنید برای iOS Safari از ویژگی touch-callout نیز استفاده شده است. برای مرورگرهای به روز opera و chrome نیازی نیست که از Prefix استفاده بشه.

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

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

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

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

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

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.