弹出模态框中的textarea文本域无法编辑，应如何排查解决？

核心原因排查（按出现概率从高到低排序） #

• textarea无高度导致点击区域失效
  你给textarea配置的内联样式仅指定了width:100%，未设置高度，原生textarea默认高度极小，你大概率点击的是textarea外的区域，无法触发输入聚焦。只需给textarea增加高度样式即可修复，示例：

<textarea name="alttext_image" id="alttext_image" class="js-question-text autosize" tabindex="1" style="word-break:break-word;display:block;width:100%;resize:none;height:80px;" placeholder="Type alternative text for image"></textarea>

• 事件冒泡被外层遮罩拦截
  如果你给外层遮罩层.popup-img绑定了点击关闭模态框的逻辑，且没有做点击区域判断、也未阻止事件冒泡，就会导致点击内部textarea时，事件被外层拦截，无法触发textarea聚焦。只需给模态框内容区域增加阻止冒泡逻辑即可：

document.querySelector('.popup-img-content').addEventListener('click', e => e.stopPropagation())

• autosize类对应第三方库冲突
  你给textarea加了autosize类，如果你引入了对应的自动调整高度的JS库，可能是库初始化异常，给textarea添加了disabled属性或者pointer-events: none样式。你可以打开浏览器开发者工具的元素面板，选中textarea查看计算样式和属性是否存在异常。

• 内联样式冗余问题
  你外层#tpl-image的内联样式同时写了两次display属性：display:flex和display:none，虽不直接导致当前问题，但属于不规范写法，建议删掉冗余的属性定义。

快速验证方法 #

你可以先给textarea临时加边框样式，确认你点击的是textarea的有效区域：

border: 1px solid #ccc;

内容的提问来源于stack exchange，提问作者Hav11