虚拟键盘本质是html按钮集合，通过javascript绑定目标input的dom引用，用setrangetext()精准控制光标位置与输入，避免value拼接导致事件丢失或光标错乱。
直接用 <input> 拉起系统软键盘最省事，但如果你需要完全可控、不依赖系统输入法（比如 kiosk 设备、无障碍场景、或要屏蔽物理键盘），就得手写 HTML + JS 虚拟键盘——它本质就是一串带点击逻辑的 <button></button>，绑定到目标输入框。
怎么让虚拟键盘按键正确输入到指定 input 元素
核心是拿到目标 <input> 的 DOM 引用，再在按钮点击时修改它的 .value 或触发输入事件。不能只靠 innerHTML 或 textContent 拼接，否则会丢失光标位置、无法响应 input 事件监听器。
- 推荐用
inputField.setRangeText()处理光标位置：支持插入、替换、删除，且会触发原生input事件 - 简单场景可用
inputField.value += char，但光标总在末尾，不适合编辑中间内容 - 避免直接操作
inputField.innerHTML——<input>是 void 元素，不支持子内容 - 如果目标是
<textarea></textarea>，注意换行符要用\n，别用<br>
Backspace 和 Delete 键怎么实现才符合用户直觉
用户点退格，期望删掉光标前一个字符；点 Delete，删光标后一个。这取决于光标当前 selectionStart 位置，不是简单截掉末尾。
- 获取光标位置：
const pos = inputField.selectionStart - Backspace：取
value.slice(0, pos - 1) + value.slice(pos)，然后setRangeText()并把新光标设为pos - 1 - Delete：取
value.slice(0, pos) + value.slice(pos + 1)，光标保持pos - 别忘了处理边界：当
pos === 0时 Backspace 无效；pos === value.length时 Delete 无效
为什么键盘按钮点不动或输入乱码
常见不是 JS 写错了，而是 HTML 结构或事件委托出问题。
- 确保所有按钮都在同一个容器内（如
<div id="keyboard">），且事件监听绑在该容器上，用事件委托捕获 <code>event.target.tagName === 'BUTTON' - 按钮里不要嵌套其他标签（如
<span>1</span>），否则event.target.textContent可能为空或含空白；直接写<button>1</button> - 中文字符或符号要确保 HTML 文件保存为 UTF-8 编码，且页面有
<meta charset="UTF-8"> - 移动端点击延迟？给按钮加
touchstart替代click，或设cursor: pointer触发 iOS 300ms 优化 - 若只用虚拟键盘，就禁用真实输入框的软键盘：加
inputmode="none"或readonly（后者需配合tabindex="0"保持可聚焦） - 若需两者共存，用
focus()+blur()控制焦点：点虚拟键时先blur()真实 input，防止软键盘意外弹出 - 检测软键盘是否弹出？没有标准 API，只能监听
window.innerHeight变化或用resize+ 定时判断，慎用
如何让虚拟键盘适配移动端软键盘避让
虚拟键盘是纯前端 DOM，它本身不会触发系统软键盘，所以「避让」问题只发生在你同时用了真实 <input> 和虚拟键盘混合场景（比如用虚拟键盘输数字，但允许用户切回系统键盘输中文）。
真正麻烦的不是画按钮，而是光标管理、输入法兼容、移动端 focus 行为差异——这些细节不处理，用户一编辑就卡住，或者退格键突然失效。别假设“点一下加个字符”就够了。
