Disable text selection in textarea
Solution 1
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).
Solution 2
<textarea unselectable="on" id="my_textarea"></textarea>
*.unselectable {
-webkit-user-select: none;
}
Solution 3
Below code can help you
JS Code:
$(document).ready(function(){
$('#txtInput').bind("cut copy paste",function(e) {
e.preventDefault();
});
});
Comments
-
Bram W. about 2 years
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.
-
Amyth over 10 yearsThe OP does not want to make the textarea read-only, he would just want the select functionality to be disabled.
-
Pointy over 10 yearsHas no effect in Firefox.
-
Ankur Dhanuka over 10 yearsby disabling the textarea, text selection can be done
-
Pointy over 10 years@AnkurDhanuka disabling the element will prevent keyboard events from being generated, so that probably won't work for the OP.
-
HIRA THAKUR over 10 yearsthats because user wants it only in chrome.We can add moz-user-select:none
-
Pointy over 10 yearsoops sorry, I missed that, and you're also right that
-moz-user-select: none
works! I think this is the right answer. -
Martin Zeitler over 5 years@Gorky for reference: 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).
-
Gorky over 5 yearsbugs.chromium.org/p/chromium/issues/… Looks like intentional for interop
-
iampre409 over 3 yearsI tried just putting <textarea disabled></textarea> as w3schools and other suggest. This answer was the only way I was able to get it to work.