Disable text selection in textarea

Question

I need to find a way to prevent users from selecting text in a textarea. The goal is to create a custom keyboard that is used to enter text in the textarea. I want users to be able to click on the textarea to set the caret position (which is already working right now). However, I don't want the users to be able to select certain parts of the inserted text, or there should at least be no visual indication of this. I have already tried a few things, such as the following CSS, but without success.

textarea {
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

The solution can be in CSS and/or JavaScript, and it only has to work in Google Chrome.

Disabling the textarea will not work for me. As I mentioned, I want users to be able to place the caret at certain positions by clicking on the location. If I would disable the textarea, this functionality would be lost.

Unless I'm reading this wrong, wouldn't disabled do what you want? — David Nguyen, Oct 02 '13 at 14:01
http://stackoverflow.com/questions/4712030/disable-text-selection-and-add-exceptions — HIRA THAKUR, Oct 02 '13 at 14:02
Disabling the text selection is easy... you're really asking how to disable text selection while still allowing users to click to place the cursor at a specific point? — andi, Oct 02 '13 at 14:05
Disabling the element will also prevent any keyboard actions from getting through, so that is probably not a good solution. — Pointy, Oct 02 '13 at 14:06
@BramW. well the answer by OPUS *almost* works; it's possible to navigate through the textarea content with arrow keys, but it's not possible to click in the content. Disabling selection I suppose also disables that (which seems wrong, but what can you do). — Pointy, Oct 02 '13 at 15:19

Martin Zeitler · Answer 1 · 2014-06-15T21:19:01.703

8

A combination of the "readonly" property and "user-select" property works.

The 2nd rule disables the highlighted border on select, which is a kind of visual selection.

The "unselectable" property seems to be Opera/IE specific.

the styles:

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

.noselect:focus {
   outline: none;
}

the markup:

<textarea class="noselect" readonly="readonly" unselectable="on"></textarea>

read-only might be more suitable than disabled (one can still toggle with JS, upon click event).

edited Jun 15 '14 at 21:19

answered Jun 15 '14 at 20:22

Martin Zeitler

1
19
155
216

@Gorky for reference: https://developers.google.com/web/updates/tags/removals ...if something had changed, it should be listed there (I'm in a hurry right now, no time to dig further). – Martin Zeitler Jan 21 '19 at 07:40
https://bugs.chromium.org/p/chromium/issues/detail?id=881308&can=1&q=user-select%3A%20none%20input&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified Looks like intentional for interop – Gorky Jan 22 '19 at 05:00

score 4 · Answer 2 · answered Oct 02 '13 at 13:59

4

<textarea unselectable="on" id="my_textarea"></textarea>

    *.unselectable {
   -webkit-user-select: none;
    }

answered Oct 02 '13 at 13:59

HIRA THAKUR

17,189
14
56
87

Has no effect in Firefox. – Pointy Oct 02 '13 at 14:07
2

thats because user wants it only in chrome.We can add moz-user-select:none – HIRA THAKUR Oct 02 '13 at 14:09
1

oops sorry, I missed that, and you're also right that `-moz-user-select: none` works! I think this is the right answer. – Pointy Oct 02 '13 at 14:12

score 1 · Answer 3 · answered Apr 26 '17 at 10:29

1

Below code can help you

JS Code:

$(document).ready(function(){
   $('#txtInput').bind("cut copy paste",function(e) {
      e.preventDefault();
   });
});

answered Apr 26 '17 at 10:29

Vinutha N

156
6

score 1 · Answer 4 · edited Nov 12 '21 at 08:17

1

None of these solutions worked for me. Here's one of my own:

textarea::selection {
    background-color: transparent;
}

edited Nov 12 '21 at 08:17

E_net4

27,810
13
101
139

answered Nov 11 '21 at 05:50

Calculamatrise

364
3
6

score 0 · Answer 5 · answered Jan 19 '15 at 12:23

0

Or you can just put disabled="disabled" in textarea, like this :

<textarea disabled="disabled"></textarea>

answered Jan 19 '15 at 12:23

silvadori

49
1
4

I tried just putting as w3schools and other suggest. This answer was the only way I was able to get it to work. – iampre409 Oct 19 '20 at 13:38

score 0 · Answer 6 · answered Nov 24 '22 at 08:59

0

The answers didn't work for me, so I put a div with position: absolute; on top of the textarea, and it works perfectly.

answered Nov 24 '22 at 08:59

Samuel Gfeller

840
9
19

score -2 · Answer 7 · answered Oct 02 '13 at 14:00

-2

You can disable it with javascript:

document.getElementById("textarea").disable='true';

answered Oct 02 '13 at 14:00

Mike H.

1,731
9
31

score -3 · Answer 8 · answered Oct 02 '13 at 14:01

-3

<textarea disabled="readonly"></textarea>

tested it is working.

answered Oct 02 '13 at 14:01

Ankur Dhanuka

1,217
2
11
22

1

The OP does not want to make the textarea read-only, he would just want the select functionality to be disabled. – Amyth Oct 02 '13 at 14:05
by disabling the textarea, text selection can be done – Ankur Dhanuka Oct 02 '13 at 14:07
@AnkurDhanuka disabling the element will prevent keyboard events from being generated, so that probably won't work for the OP. – Pointy Oct 02 '13 at 14:08

Disable text selection in textarea

8 Answers8

Linked