Deactivate text selection and use select element with firefox 40

Question

In my application, we use this pattern a lot:

<select name="select" onfocus=this.select; onClick=this.focus();>
  <option value="value1" selected>Value 1</option> 
  <option value="value2">Value 2</option>
</select>

<script>
document.onmousedown = new Function("return false");
</script>

The line document.onmousedown = new Function("return false"); is aimed to prevent text selection in the page. Unfortunalty, it also blocks the propagation of the mousedown event to the select element. The workarround we use is the callbacks onfocus=this.select; onClick=this.focus();.

My problem is that it doesn't work with Firefox 40 : clicking on the select box does nothing. (works fine with 39)

I can remove the line document.onmousedown = new Function("return false"); to repair the select box but it would allow text selection in the page.

My question is : what are my options to have both the working select box and the not working text selection with Firefox 40 ?

Can't you just use CSS? `-moz-user-select: none; user-select: none;` (and any required vendor prefixes) — CodingIntrigue, Aug 28 '15 at 15:30
@RGraham Thx, I was to focused on what to do with the select element to search other ways... — Sylvain Biehler, Aug 28 '15 at 16:30

score 1 · Accepted Answer · edited May 23 '17 at 11:58

You can use CSS.

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Then apply the noselect class (or whatever you want to call it) to any elements whose text you don't want to be selectable.

See this question that discusses support of those different css properties in different browsers.

Deactivate text selection and use select element with firefox 40

1 Answers1