有没有办法防止用户点击文本区域？ [复制]答案

【问题标题】：Is there a way to prevent the user's click in a textarea? [duplicate]有没有办法防止用户点击文本区域？ [复制]
【发布时间】：2019-06-10 16:39:41
【问题描述】：

我正在尝试在 Vuejs 应用程序中模拟 html/css/javascript 中的终端。为此，我正在使用文本区域。

用户不应该点击前一行并更新或删除文本。那么是否可以防止用户在文本区域中单击而只允许键盘操作？

【问题讨论】：

文本区域可能不是您想要的正确类型的元素。
您应该尝试自己编写代码。在doing more research 之后，如果您有问题发布您尝试过的方法，并清楚地解释什么不起作用，并提供a Minimal, Complete, and Verifiable example。阅读How to Ask 一个好问题。请务必take the tour 并阅读this。
只是为了发表我的想法和建议 - 您应该允许他们一次输入一个框作为输入。他们按下回车键，它会被附加到一个 div 来显示。这有助于模拟命令行 - 您可以在一行中输入输入并提交，然后仅查看它。文本区域很可能不是最佳的 HTML 解决方案
我没有想过简单的输入解决方案，但我肯定会尝试一下！谢谢@ZacharyBrooks

标签： javascript html css vue.js

【解决方案1】：

Codepen

您可以在 textarea 上阻止默认的 onmousedown 事件：

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

【讨论】：

【解决方案2】：

将disabled 属性添加到您的<textarea> 标记中，如下所示：

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

【讨论】：

【解决方案3】：

是的，你可以禁用 textarea 并且你也可以设置只读

已禁用的文本区域

<!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>

只读文本区域

<!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>

【讨论】：

【解决方案4】：

您可以简单地使用纯 CSS 解决方案：

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

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

【讨论】：

【解决方案5】：

您可以在 HTML 标记中使用 readonly 属性。

工作示例：

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

【讨论】：