Disable Text Selection in Chrome

Question

I am building a touchscreen kiosk that will use Google Chrome to display the content. There is no keyboard except for a virtual keyboard that will pop up for entering name info on certain screens. Nowhere on the kiosk will a user need to select anything.

When I place my finger anywhere on the screen and drag it around, the blue selection fields start appearing. I have got to do away with that.

Initially I was using Opera, which has a config feature for disabling text selection. I couldn't find the equivalent for this in Chrome.

Anyone know if there IS a config for this in Chrome, or alternatively what Javascript will accomplish this?

Answer 1

Why not simply use CSS to remove the selection effect instead of relying on Javascript?

*::selection {
    background:transparent;
}

*::-moz-selection {
    background:transparent;
}

*::-webkit-selection {
    background:transparent;
}

/* DO NOT COMBINE... IF COMBINED, IT WILL REFUSE TO WORK */
/* FOR CHROME 5+ (untested in 4), ONLY ::SELECTION IS REQUIRED */

Selection will still be possible, but there will not be any blue rectangles. In fact, selection will be totally invisible to the user.

For what I can read from your scenario, you are just trying to get rid of the selection rectangles.

Answer 2

I don't know if there is a config setting in chrome for this, but a quick google (source) turned this up:

window.onload = function() {
  document.onselectstart = function() {return false;} // ie
  document.onmousedown = function() {return false;} // mozilla
}


/* You can attach the events to any element. In the following example
I'll disable selecting text in an element with the id 'content'. */

window.onload = function() {
  var element = document.getElementById('content');
  element.onselectstart = function () { return false; } // ie
  element.onmousedown = function () { return false; } // mozilla
}

PS:

Just tested to see if this would interfere with any onclick events, and it doesn't.