Multiple selection of rows in table using the shift key

Question

Hi,

On my website I have used a HTML table to populate the data in rows. I have implemented functionality to select a range of rows by holding shift keys (select begin and end row and it will automatically select the rows in between). I am changing the background color of the rows for selection (I am using javascript to changing the background color of rows).

The trouble is that while my functionality is working fine, the extra windows selection, in Dark blue color, is also dispaying over my selection. Which looks ugly. I need to remove the windows selection from the rows. I need only my functionality.

Help me on this.

Answer 1

Browser select happens when you click somewhere and then shift+mousedown somewhere else, so you need to cancel the second mousedown. To do this, you need to add

return false;

to your onmousedown event handler.

Answer 2

You mean your text gets selected?

You have to disabled text selection during your selection, see here how to do it.

Answer 3

This works for me to disable "selection" in both FF and IE:

// jQuery Solution
$(document).mousedown(function (e)
{
   return false;
});

$(document).bind("selectstart", function (e)
{
   return false;
});

If you're not using jQuery, here's the plain javascript solution.

// Vanilla Javascript Solution
function attachEvent(element, eventName, handler)
{
    if(element.addEventListener)
    {
        element.addEventListener(eventName, handler, false);
    }
    else
    {
        element.attachEvent("on" + eventName, handler);
    }
}

attachEvent(document, "mousedown", function (e)
{
  if(window.addEventListener)
  {
     e.preventDefault();
  }
  return false;
});

attachEvent(document, "selectstart", function (e)
{
  return false;
});