如何移除textarea文本域的「禁止」图标效果并完全禁用用户交互

当前已有CSS仅禁用了文本选中样式和基础交互，textarea原生的文本拖拽、选中触发事件属于DOM默认行为，仅靠CSS无法完全拦截，可根据需求选择以下两种方案：

方案1：完全禁用所有交互（含滚动） #

直接在原有CSS的#text-main规则中新增1行属性即可，无需额外代码：

pointer-events: none;

该属性会拦截所有鼠标、触摸交互，自然也无法触发文本拖拽行为。

方案2：保留滚动能力，仅禁用输入、选中文本、拖拽功能 #

第一步：补充CSS规则 #

在#text-main选择器内新增拖拽禁用属性，原有代码保留即可：

#text-main {
  /* 原有代码不变，新增以下2行 */
  -webkit-user-drag: none;
  user-drag: none;
}

第二步：添加JS事件拦截 #

在页面内加入以下JS代码，拦截所有触发文本选中、拖拽的默认事件：

const textArea = document.getElementById('text-main');
// 禁止文本选中
textArea.addEventListener('selectstart', e => e.preventDefault());
// 禁止拖拽触发
textArea.addEventListener('dragstart', e => e.preventDefault());
// 禁止鼠标按下选中文本
textArea.addEventListener('mousedown', e => e.preventDefault());
// 禁止复制文本
textArea.addEventListener('copy', e => e.preventDefault());

修改后所有文本选中、拖拽、输入、聚焦行为都会被完全拦截，符合需求。

内容的提问来源于stack exchange，提问作者Étienne Letarte