Unable to select text in a table cell (iPhone Mobile Safari)
I'm building a webapp that targets the iPhone. And for the most part I don't want a user to be able to select the text on the screen (ie button text, toolbars, etc), so in my css I specify the 开发者_JAVA技巧default behavior for -webkit-user-select: none;. But on certain table cells I do want the user to be able to select text, so I apply the css class below .selectable which changes the -webkit-user-select: to auto. Now this works in Chrome and Safari, but not on the iPhone. Could someone explain why and/or how to fix it?
body {
/* Remove the iphone callout */
-webkit-touch-callout: none;
/* Remove the iphone link highlight */
-webkit-tap-highlight-color: rgba(0,0,0,0);
/* Prevent the automatic resizing of text */
-webkit-text-size-adjust: none;
/* Limit copy and paste to only elements we want */
-webkit-user-select: none;
overflow-x: hidden;
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
margin:0;
padding:0;
min-height:460px;
}
.selectable, input, textarea {
-webkit-user-select: auto;
}
Edit: I tried removing the -webkit-user-select:none altogether, and while it does allow me to select other things, it does not allow me to select the text of a table cell, only the row as a whole. Is there anyway to get this to work as is or do I need to remove the table altogether?
Note that the text of the table cell is only available for selection if the zoom level is high enough for the user to pull the selection handle inside a cell without triggering the selection of other elements. This is nontrivial to avoid, and happens on all pages.
You should not be blocking --everything-- only to allow some parts later. Instead, you should block only the elements you don't want to be selectable. This will solve your issue. :-)
精彩评论