最简实现是为input设id，按钮onclick中用document.getElementById().value="值"赋值；需配合focus()和setSelectionRange()将光标移至末尾，避免覆盖输入，且须操作value property而非attribute。

点击按钮后往 <input> 里填内容，最简实现怎么写

直接用 onclick 绑定 value 赋值就行，不用引入框架或监听事件。关键不是“怎么触发”，而是“填到哪个输入框”——必须有明确的定位方式。

• 给 <input> 加 id="testInput"（推荐），或用 name、class 配合 document.querySelector()
• 按钮的 onclick 里调用 document.getElementById("testInput").value = "测试数据"
• 别写成 innerHTML 或 textContent——对 <input> 无效

value 赋值后光标没在末尾？用户还得手动删或重输

默认赋值后光标停在开头，体验差。得主动把光标移到末尾，否则用户输入新内容时会插在前面。

• 赋值后立刻调用 inputElement.focus() 和 inputElement.setSelectionRange(inputElement.value.length, inputElement.value.length)
• 注意：setSelectionRange 在 type="number" 输入框上可能失效，改用 type="text" 更稳妥
• 如果输入框被禁用（disabled），focus() 无效，得先 removeAttribute("disabled")

多个输入框要批量填，默认数据从哪来

硬编码每个 value 不现实。把默认值存在对象里，用 name 或 data-key 做映射更可控。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 给每个 <input> 加 data-key="username"，再定义 const defaults = { username: "testuser", email: "test@example.com" }
• 按钮点击时遍历所有带 data-key 的输入框：document.querySelectorAll('input[data-key]').forEach(el => { el.value = defaults[el.dataset.key] || "" })
• 避免用 id 动态拼接（比如 "input-" + i），容易漏写或错位

填完数据后想清空，但 value = "" 不生效？

常见原因是用了 value 属性（attribute）而非 property。HTML 中写的 value="初始值" 是初始属性，JS 修改的是 DOM property，清空时也得操作 property。

立即学习“前端免费学习笔记（深入）”；

• 正确写法是 el.value = ""（property），不是 el.setAttribute("value", "")（attribute）
• 如果输入框绑定了 Vue/React 的双向绑定，直接改 value 可能被框架覆盖，得触发 input 事件：el.value = ""; el.dispatchEvent(new Event("input", { bubbles: true }))
• 表单重置（form.reset()）会恢复初始 value 属性值，不是 JS 当前设的值

实际写的时候，最容易被忽略的是光标位置和框架兼容性——尤其在已有 React 或 Vue 项目里直接操作 DOM value，不派发事件，数据层根本不知道变了。