چگونه انتخاب کردن متن در 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 نمیشه.
اگر شما هم مظلب جالبی در این موارد در بخش نظرات و پیشنهادات برای ما ارسال کنید.
امیدوارم این مطلب مورد پسند شما باشه ،موفق باشید.
