CSS ile Yazı Seçimini Engellemek (user-select)

Eğer touch ekranlar için CSS kodlaması yapıyorsanız, böyle bir sorunla karşılaşabilirsiniz.. Özellikle makinalar dandik ve kullanan kişilerde bu işi bilmeyenlerden ise gereksiz tıklamalar ile nesne içerisindeki değerleri seçeceklerdir.. Bunun olmasını önlemek için CSS imdadımıza yetişiyor.. Tüm modern tarayıcılarda ve IE10 olmak üzere ön ekler ile birlikte kullanıldığında herhangi bir sorunla karşılaşmıyorsunuz.. Bu işlem için user-select değerini none yapmamız yeterli.

Tüm elemanlara uygulamak için gerekli CSS kodu;

*:not(input):not(textarea) {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none
}

Ya da bazı belli başlı elemanlara uygulamak için onlara unselectable adında bir sınıf atayabilir ve bu sınıf için bu kod tanımlamalarını yapabilirsiniz;

.unselectable {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none
}

IE9 ve Altı İçin Çözüm

CSS ile bir çözümünü bulamadım.. Ancak html niteliği ve javascript ile çözümleri mevcut.. Seçilemez olmasını istediğiniz nesneye unselectable=”on” eklemeniz yeterli olacaktır.

<div unselectable="on">
bu yazı artık ie9 ve altı için seçilemez hale geldi!
</div>

Ya da javascript ile yapmak istersek setAttribute() ile niteliği ekleyebiliriz.

<div id="nesne">
bu yazı artık ie9 ve altı için seçilemez hale geldi!
</div>
<script type="text/javascript">
document.getElementById("nesne").setAttribute("unselectable", "on");
</script>

Evet işte bu kadar, artık nesneler içerisindeki yazılar seçilemez oldu ????