12

I have a table on my web page that have checkboxes on them. I have jquery code that allows me to shift click to check multiple rows for editing/removal. But when I shift click to select a range all of the text inside the range gets highlighted.

Is there any way using jquery or css to stop the text from being highlighted?

--EDIT--

    HTML code
...
<tbody>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>
      <div class="cam_ip">192.168.200.78</div>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>
      <div class="cam_ip">192.168.200.250</div>
    </td>
  </tr>
</tbody>

There can be x amount of rows. The jquery works when I click a row, that row is marked as an anchor, then when I shift click on another row it is marked as anchorrange, then a function is called which will loop through each row inside the range making it checked. The side effect of using e.shiftClick(); is that all the text within the range gets highlighted. I need to stop this side effect.

DarylF
  • 716
  • 3
  • 9
  • 24

1 Answers1

8

CSS version

user-select: none;
-webkit-user-select: none;
-moz-user-select: none;

also a possible related question to How to disable text selection highlighting using CSS?

Year later edit (integrating from comment):

Colleague pointed this out Is there a way to make text unselectable on an HTML page? - use unselectable="on" on whatever you want not selectable

Community
  • 1
  • 1
Thomas Jones
  • 4,892
  • 26
  • 34
  • 1
    This code works on all browsers except for IE, I tried changing `user-select: none;` to `ms-user-select: none;` but still no luck. Would you know any reason why this is happening? – DarylF Apr 23 '12 at 07:35
  • it appears that -ms-user-select is new in IE10 http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ since this is the case, I'd imagine that its not supported at all for – Thomas Jones Apr 23 '12 at 18:18
  • 3
    Colleague pointed this out http://stackoverflow.com/questions/69430/is-there-a-way-to-make-text-unselectable-on-an-html-page use 'unselectable="on"' on whatever you want not selectable – Thomas Jones Apr 24 '12 at 13:25