6

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.

Adam
  • 482
  • 4
  • 15
  • making thing unselectable, a link [here.](http://stackoverflow.com/questions/4448671/making-things-unselectable-in-ie) – Optimus Prime Jul 18 '13 at 17:48
  • Look here: http://stackoverflow.com/questions/2700000/how-to-disable-text-selection-using-jquery – Javis Perez Jul 18 '13 at 17:48
  • Do you mean you can't click in the corner and drag it to resize? Or do you mean select a word in the text and drag it and drop it into another component? – Lee Meador Jul 18 '13 at 17:50
  • 1
    Possible duplicate: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting – tomekwi Sep 17 '14 at 09:21

2 Answers2

6

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;
}
Optimus Prime
  • 6,817
  • 5
  • 32
  • 60
  • Thank you. It seems though that when I use this code the entire textarea becomes unselectable (not just the characters) and I can't write inside it anymore. Is it possible to only disable the text selection (the blue part when you select multiple characters)? Thanks! – Adam Jul 18 '13 at 18:47
  • 1
    @Adam Check [this link](http://www.strangeplanet.fr/work/jquery-highlighttextarea/). If you can highlight part of the textarea, you can do something like `onselect`, `unselect` the selected text. Or you can create a new `div` with `contenteditable` set to `true` and then try doing this thing. If not with `textarea` as suggested in [this question](http://stackoverflow.com/questions/9873937/how-to-change-a-single-character-color-in-textarea) – Optimus Prime Jul 18 '13 at 19:51
  • Simplier trick and always working :
    – bArraxas Jan 26 '23 at 10:21
3

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

DevlshOne
  • 8,357
  • 1
  • 29
  • 37
  • All it says is `select and drag`. Where does it say resize? – DevlshOne Jul 18 '13 at 17:50
  • 2
    We'll find out for sure if the OP ever returns to address the comments. – DevlshOne Jul 18 '13 at 17:54
  • Yes - I'm back. Thanks for the comments. I meant, to be able to click on a character and then select more and more characters (in such a way that will enable mass-deletions). Thanks. – Adam Jul 18 '13 at 17:55