应使用 value 属性读取 input 和 textarea 的用户输入，而非 innerHTML 或 textContent；监听 input 事件实现边输边读，注意 value 属性与 value HTML 属性的区别。
直接用 value 属性读取用户输入的文本内容
HTML5 中的 、、 等单行文本输入框，其当前值始终可通过 DOM 元素的 value 属性实时获取。这不是 HTML5 新增特性，但它是最可靠、最轻量的读取方式，无需监听事件也能手动触发读取。
常见错误是试图用 innerHTML 或 textContent 获取输入内容——它们对 input 元素无效，因为文本不作为子节点存在，而是由表单控件内部状态管理。
- 确保元素已加载完成再访问，否则
document.getElementById("myInput")可能返回null - 读取时机决定结果：在用户输入后、表单提交前、或响应
input/change事件时调用 - 注意：空格和换行不会被自动 trim，需手动调用
.trim()处理
监听 input 事件实现“边输边读”
若需要实时响应用户每次按键（包括删除、粘贴、输入法上屏），应绑定 input 事件而非 keyup 或 change。change 只在失焦时触发，keyup 无法捕获鼠标粘贴、拖拽填入等操作。
const input = document.getElementById("searchBox");
input.addEventListener("input", function() {
console.log("当前输入：", this.value);
});
-
input事件兼容性良好（IE9+，所有现代浏览器），是 HTML5 推荐的实时输入监听方式 - 避免在回调中频繁执行重绘或复杂计算，否则会卡顿；可考虑节流（throttle）处理
- 移动端软键盘切换、输入法组合过程可能触发多次
input，this.value始终反映最终可见文本
读取 contenteditable 区域的区别
虽然属于文本输入控件，但它和 input 一样，**必须用 value 属性读取**，不能用 innerText 或 innerHTML —— 后者可能包含转义字符或格式干扰，且在某些浏览器中返回空字符串。
而 contenteditable="true" 的 div 是完全不同的机制：它没有 value 属性，必须用 innerText（纯文本）或 innerHTML（含标签）获取内容，且需注意光标位置、富文本残留等问题。
- 误把
当作普通元素，用document.getElementById("desc").innerText→ 返回空或不可靠 - 正确写法：
document.getElementById("desc").value -
contenteditable不是表单控件，不会随自动提交，也不受required等原生验证约束
注意表单重置与初始值陷阱
input 元素的初始值来自 value HTML 属性，但 JS 修改 value 属性后，该属性值不会自动同步更新。调用 form.reset() 会将控件恢复为原始 value 属性值，而不是 JS 动态设置的内容。
- 点击“设为张三”后，
input.value是"张三"，但
input.getAttribute("value")仍是"默认名" - 此时点“重置”，输入框会变回
"默认名"，不是"张三" - 如需重置为 JS 设置后的值，应手动赋值，或改用
data-属性记录“当前有效默认值”
value 属性和 value 属性值（attribute）是两回事**。读取用户当前输入只看属性（property），而表单重置依赖的是初始 attribute。混淆这两者，是调试时最常卡住的地方。
