本文详解因 HTML 标签名拼写错误（texarea → textarea）及属性误用（columns → cols）导致的 textarea 不可点击、不可输入问题，并提供完整修正代码与最佳实践。
本文详解因 html 标签名拼写错误（`texarea` → `textarea`）及属性误用（`columns` → `cols`）导致的 textarea 不可点击、不可输入问题，并提供完整修正代码与最佳实践。
在前端开发中，一个微小的拼写错误就可能导致功能完全失效。你遇到的“能显示内容却无法点击或输入”的问题，根源在于 JavaScript 中创建元素时使用了错误的标签名：texarea（多了一个 x），而标准 HTML 标签应为 textarea。浏览器无法识别 texarea，因此会将其当作一个未知的自定义元素（custom element）处理——它不具备原生 <textarea> 的表单行为（如聚焦、键盘输入、文本编辑等），自然无法编辑。
此外，setAttribute('columns','5') 也存在语义错误：<textarea> 的列宽属性名为 cols（非 columns），该属性控制可见宽度（以字符为单位），若拼写错误则无效，虽不影响可编辑性，但会导致样式异常。
✅ 正确写法如下（已修正关键错误并增强健壮性）：
function edit(btn) {
const id = btn.dataset.id;
const div = document.getElementById(`div${id}`);
const post = document.getElementById(`post${id}`);
// 移除原始内容节点
post.remove();
// ✅ 正确创建 textarea 元素（注意拼写：textarea，不是 texarea）
const textArea = document.createElement('textarea'); // ← 关键修正！
// ✅ 使用 textContent 初始化值（安全，防 XSS），并设置标准属性
textArea.textContent = post.textContent;
textArea.setAttribute('rows', '4');
textArea.setAttribute('cols', '50'); // ← columns → cols；建议设为合理值（如50），避免过窄
textArea.setAttribute('name', 'contents');
textArea.setAttribute('id', `textarea-${id}`); // 可选：便于后续操作或样式控制
// ✅ 添加基础样式确保可交互（如必要）
textArea.style.width = '100%';
textArea.style.padding = '0.5rem';
textArea.style.boxSizing = 'border-box';
// 插入到容器
div.appendChild(textArea);
// ✅ 自动聚焦，提升用户体验
textArea.focus();
}? 注意事项与最佳实践：
立即学习“Java免费学习笔记（深入）”；
- 永远校验元素标签名：createElement() 中的字符串必须与标准 HTML 标签名完全一致（区分大小写，但通常全小写）。
- 使用 cols 和 rows 控制尺寸：二者均为原生属性，无需 CSS 即可生效；cols 影响水平宽度，rows 控制可见行数。
- 避免内联样式污染逻辑：生产环境建议将 width、padding 等样式抽离至 CSS 类（如 .editable-textarea），保持 JS 专注逻辑。
- 添加 focus() 提升可用性：用户点击“Edit”后应立即获得输入焦点，减少额外点击。
- 考虑无障碍支持：为 textarea 添加 aria-label 或关联 <label>，例如：textArea.setAttribute('aria-label', 'Edit post content')。
最后，请检查你的 HTML 结构是否包含重复 ID（如多个 id="creator_post"），这虽不直接导致 textarea 失效，但违反 HTML 规范，可能引发其他不可预期行为。ID 必须全局唯一，推荐对重复区块使用 class 替代。
修正后，textarea 将正常响应鼠标点击、键盘输入、回车换行等全部原生行为——问题迎刃而解。
