How to make editable textarea text non-selectable

Question

I'm trying to create a textarea that is not read-only (users can type), but they cannot select and drag.

All that I found either turns the textarea into readonly, or disables my ability to focus.

Appreciate any help.

Answer 1

In jQuery 1.8, this can be done as follows:

$('textarea')
    .attr('unselectable', 'on')
    .css('-webkit-user-select', 'none')
    .css('-moz-user-select', 'none')
    .css("-ms-user-select","none")
    .css("-o-user-select","none")
    .css("user-select",'none')
    .on('selectstart', false)
    .on('mousedown', false);

or by just using css,

#yourtextarea
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Answer 2

You can use the CSS style user-select: none; to keep text from being selectable.