Long time back, I was working in a project which required us to make a particular position of text unselectable by the user on a webpage.
I was looking at various JavaScript solutions and finally found the CSS selectable property. But it was not working across different browsers. It took a considerable effort to make it work across different browsers.
I found this code while browsing through archives and thought of posting it here so that I know where to find it, if I need it and also it would be useful for others who want to do the same thing.
BTW, one quick disclaimer. Even I hate it when people make a particular position of text unselectable in a browser. So use it if it is really needed and also remember it is not fool-proof.
Well, let’s see the code then.
<html> | |
<head> | |
<title>Making text unselectable</title> | |
<style> | |
body { | |
*-moz-user-select: none; | |
*-khtml-user-select: none; | |
*user-select: none; | |
} | |
.unselectable { | |
-moz-user-select: none; | |
-khtml-user-select: none; | |
user-select: none; | |
} | |
.selectOn { | |
-moz-user-select: ; | |
-khtml-user-select: ; | |
user-select: ; | |
} | |
</style> | |
</head> | |
<body unselectable="on"> | |
<div class="unselectable" unselectable="on"> | |
<span class="unselectable" unselectable="on">You cannot select this text.</span> | |
</div> | |
<div class="selectOn"> | |
<p>This is normal text that you can select</p> | |
</div> | |
</body> | |
</html> |
Making text unselectable in browser http://t.co/28NW7WEq
RT @sudarmuthu: Making text unselectable in browser http://t.co/28NW7WEq