How to disable text selection in jquery-UI dialog without disabling form elements

Question

I'm using jQuery-UI to build a site with dialogs containing form inputs (input and select specifically), yet I do not want the user to be able to accidentally highlight the text, radio buttons and elements used in the dialog as this looks ugly (and selecting is surprisingly easy to do by accident on the ipad). I have been using the jQuery plugin disableTextSelect, and applying it to the dialog class. Yet this makes my input elements unclickable.

Things I've tried so far:

$("#mydialog").children(":not(input)").disableTextSelect() // everything was unselectable
$("#mydialog").disableTextSelect(); $("input","#mydialog").enableTextSelect() // everything was unselectable

Answer 1

Could be a result of your making the entire dialog unselectable - that might be affecting the child inputs as well. You'd need to apply it to the dialog's children excluding inputs, not the dialog itself.

Answer 2

Although it's not ideal, I reproduced the effect of the built-in event by doing:

$("#mydialog").disableTextSelect();

$("input,textarea").mousedown(function (e) {$(this).trigger('focus');});