Text selection best practice in web app
Possible Duplicate:
css rule to disable text selection highlighting
we are building a web app that allows elements to be expanded/collapsed.
One of the clickable items is shown below:
http://f.cl.ly/items/2d1Z1j0X0w3w1e1b210f/Screen%20Shot%202012-09-28%20at%2014.54.42.png
Notice the text selection when clicking on the element is annoying. What is the recommended approach for handling this?
For Firefox and Chrome/Safari you can use the user select property. It is still experimental I think so you should use vendor prefixes like this: #element-id{-moz-user-select: none; -webkit-user-select: none;} #element-id{-moz-user-select: none; -webkit-user-select: none;}
As for Opera and IE I have no idea (maybe for Opera using -o-user-select will work, but I am not sure)
EDIT: I looked around a bit, because I was also interested in this question and apparently, for Opera and IE there is an unselectable property. More details about it
To disable selection in a CSS way:
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
or you may use element attribute unselectable
<div unselectable="on">...</div>
上一篇: 不可选择的文字（链接）
下一篇: 文字选择在Web应用程序中的最佳实践