Is there a way to prevent the user's click in a textarea?

Question

I am trying to emulate a terminal in html/css/javascript in a Vuejs app. For that I am using a textarea.

The user is not supposed to click on a previous line and update or delete the text. So is it possible to prevent user click in the textarea and only allow keyboard actions ?

the text area might not be the right kind of element you want. — Daniel A. White, Jun 10 '19 at 17:07
You are expected to try to **write the code yourself**. After [**doing more research**](https://meta.stackoverflow.com/q/261592/1011527) if you have a problem **post what you've tried** with a **clear explanation of what isn't working** and provide [a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). Read [How to Ask](http://stackoverflow.com/help/how-to-ask) a good question. Be sure to [take the tour](http://stackoverflow.com/tour) and read [this](https://meta.stackoverflow.com/q/347937/1011527). — Jay Blanchard, Jun 10 '19 at 18:49
Just to post my thoughts and recommendations - You should allow them to type in one box as an input at a time. They press enter and it gets appended to a div to display. This helps emulate a command line - You can enter input in one line and submit it, then only view it. A textarea is most likely not the most optimal HTML solution — Zachary Brooks, Jun 10 '19 at 19:43
I did not think about the simple input solution but I am definitely going to try this out ! Thank you @ZacharyBrooks — naomi, Jun 13 '19 at 06:25

score 1 · Accepted Answer · answered Jun 10 '19 at 16:45

1

Codepen

You can just prevent default onmousedown event on textarea:

document.getElementById('textarea').onmousedown = function(e){
  e.preventDefault();
}

answered Jun 10 '19 at 16:45

yaya

7,675
1
39
38

score 1 · Answer 2 · edited Jun 10 '19 at 18:48

1

Add the disabled attribute to your <textarea> tag, like this:

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

edited Jun 10 '19 at 18:48

Malekai

4,765
5
25
60

answered Jun 10 '19 at 17:02

Philip McAsey

11
2

score 1 · Answer 3 · edited Jun 10 '19 at 18:50

Yes It is Possible u can disable the textarea and u can set readonly also

Textarea with disabled

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is textarea with disabled</h1>

<textarea rows="10" cols="50" disabled>
 dsdkiensdsndsjdnjnjdndjsndajndasjdnasjd
</textarea>

</body>
</html>

Textarea with readonly

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is Textarea with readonly</h1>


<textarea rows="10" cols="50" readonly>
 dsdkiensdsndsjdnjnjdndjsndajndasjdnasjd
</textarea>

</body>
</html>

score 0 · Answer 4 · answered Jun 10 '19 at 17:02

0

you can simply use the css-only solution:

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

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

answered Jun 10 '19 at 17:02

Ayush Gupta

41
1
8

score 0 · Answer 5 · answered Jun 10 '19 at 17:35

0

You can use the readonly attribute in your HTML markup.

Working Example:

<textarea readonly>
Here is some sample text.
</textarea>

answered Jun 10 '19 at 17:35

Rounin

27,134
9
83
108

Is there a way to prevent the user's click in a textarea?

5 Answers5