CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Adam
Adam

Reputation: 502

How to make editable textarea text non-selectable

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.

Upvotes: 7

Views: 10025

Answers (2)

Optimus Prime
Optimus Prime

Reputation: 6907

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;
}

Upvotes: 6

DevlshOne
DevlshOne

Reputation: 8457

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

Upvotes: 3

Related Questions