جلوگیری از انتخاب و کپی متن با استفاده از CSS

احتمالا وبسایت‌هایی را دیده‌اید که مطالبی منتشر کرده‌اند و شما قصد دارید بخشی از آن را انتخاب (Select) و کپی کنید؛ اما متاسفانه نمی‌توانید این کار را انجام داده و بخش مورد نظر از متن را به‌حالت انتخاب درآورید!

انجام چنین کاری به کمک CSS ممکن است؛ فقط کافیست تا چند ویژگی را به المنت HTML مورد نظر خود اضافه کنید.

مراحل کار

ابتدا کلاس زیر را در استایل CSS خود تعریف کنید:

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

حالا کافیست تا به المنت مورد نظر، این کلاس را اضافه کنید. برای مثال، اگر می‌خواهید بخش مطالب سایت شما قابل انتخاب نباشد، فقط کافیست تا به المنت پدر (Parent) مربوط به متن مطالب، این کلاس را اضافه کنید؛ تا برروی تمامی المنت‌های داخل خود نیز تاثیر خود را اعمال کند.

مثالی ساده:

<p>
  این متن قابل انتخاب است.
</p>
<p class="fullkade-noselect">
  این متن قابل انتخاب نیست
</p>