本文介绍如何利用原生 <input> 元素的 setSelectionRange() API 构建专业级文本光标交互逻辑，替代手动 DOM 操作与绝对定位光标，实现字符级光标悬停、左右跳转及精准删除功能。
本文介绍如何利用原生 `` 元素的 `setselectionrange()` api 构建专业级文本光标交互逻辑，替代手动 dom 操作与绝对定位光标，实现字符级光标悬停、左右跳转及精准删除功能。
在构建类计算器或命令行式文本输入界面时，一个行为严谨的光标（caret）至关重要：它需初始位于最左端；输入后自动落于新字符右侧；支持通过左右箭头键逐字符移动；按下 Delete 键时，仅删除光标当前“悬停”的单个字符（即光标位置处的字符，而非选中区域或末尾字符）。许多开发者会尝试用 div + span + getBoundingClientRect() 手动模拟光标位置，但这种方式极易因布局计算误差、字体渲染差异、缩放响应等问题导致光标偏移、不同步甚至崩溃。
更可靠、更简洁、更符合 Web 标准的方案是——直接复用浏览器原生 <input> 的光标机制。它天然支持：
- 精确的字符索引定位（selectionStart / selectionEnd）
- 无视觉干扰的闪烁动画（由系统统一管理）
- 自动处理双向文本、Emoji、组合字符等复杂场景
- 完全兼容键盘事件（Tab、Shift+Arrow 等）
以下为完整实现方案：
✅ 核心逻辑封装（JavaScript）
const display = document.querySelector(".calc input");
// 阻止按钮点击导致焦点丢失，并强制保持 focus
function prevent(e) {
e.preventDefault();
display.focus();
}
// 插入字符（支持数字、小数点等）
function type(chr) {
const start = display.selectionStart;
const end = display.selectionEnd;
// 拼接新值：光标前 + 新字符 + 光标后
const newValue = display.value.slice(0, start) + chr + display.value.slice(end);
// 可选：限制小数点数量（如计算器场景）
if (chr === '.' && newValue.split('.').length > 2) return;
display.value = newValue;
// 光标右移一位（插入后位于新字符右侧）
display.setSelectionRange(start + chr.length, start + chr.length);
}
// 移动光标（step = -1 向左，+1 向右）
function move(step) {
const idx = Math.max(0, Math.min(display.value.length, display.selectionStart + step));
display.setSelectionRange(idx, idx);
}
// 删除光标处字符（非选中内容时删除光标右侧字符）
function remove() {
let start = display.selectionStart;
let end = display.selectionEnd;
if (start === end) {
// 无选中：删除光标右侧字符（标准 Delete 行为）
if (start < display.value.length) {
end = start + 1;
}
}
// 执行删除
display.value = display.value.slice(0, start) + display.value.slice(end);
display.setSelectionRange(start, start);
}
// 绑定所有按钮事件（避免焦点丢失）
for (const button of document.querySelectorAll("button")) {
button.addEventListener("mousedown", prevent); // 关键：用 mousedown 而非 click，防止 focus 闪退
}
// 数字/符号按钮 → 输入字符
document.querySelectorAll(".digit").forEach(btn =>
btn.addEventListener("mousedown", () => type(btn.textContent))
);
// 方向键按钮
document.querySelector(".left").addEventListener("mousedown", () => move(-1));
document.querySelector(".right").addEventListener("mousedown", () => move(1));
// 删除按钮
document.querySelector(".del").addEventListener("mousedown", remove);
// （可选）禁用键盘直接输入（若仅允许按钮操作）
display.addEventListener("keydown", prevent);
display.addEventListener("paste", prevent);
// 初始化聚焦
display.focus();✅ 基础样式（CSS）
.calc {
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 8px;
background: #222;
border-radius: 6px;
}
.calc input {
grid-column: 1 / -1;
padding: 12px 16px;
font-size: 1.2rem;
font-family: monospace;
border: none;
border-radius: 4px;
background: #000;
color: #0f0;
text-align: right;
outline: none;
}
.calc button {
padding: 12px;
font-size: 1.1rem;
background: #333;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s;
}
.calc button:hover { background: #444; }
.calc .double { grid-column: 1 / 3; }✅ HTML 结构示例
<div class="calc">
<input type="text" readonly>
<button class="left">←</button>
<button class="del">DEL</button>
<button class="right">→</button>
<button class="digit">7</button>
<button class="digit">8</button>
<button class="digit">9</button>
<button class="digit">4</button>
<button class="digit">5</button>
<button class="digit">6</button>
<button class="digit">1</button>
<button class="digit">2</button>
<button class="digit">3</button>
<button class="double digit">0</button>
<button class="digit">.</button>
</div>⚠️ 注意事项与最佳实践
- 使用 mousedown 而非 click：click 触发时焦点可能已离开 input，导致 setSelectionRange 失效；mousedown 可在焦点丢失前捕获并主动 focus()。
- 边界保护：move() 中使用 Math.max(0, Math.min(length, ...)) 防止光标越界。
- Delete 行为一致性：本实现遵循主流编辑器惯例——当无选中文本时，Delete 删除光标右侧字符（而非左侧），如需改为 Backspace 行为（删左侧），将 end = start + 1 改为 start = Math.max(0, start - 1); end = start + 1; 即可。
- 只读模式安全：<input readonly> 仍支持 setSelectionRange 和 value 修改，且阻止用户键盘输入，完美契合按钮驱动场景。
- 无障碍友好：原生 input 自带 role="textbox" 和键盘导航支持，无需额外 ARIA 注释。
该方案摒弃了易出错的手动光标 DOM 模拟，以最少代码达成高鲁棒性、高可维护性的光标控制，是构建专业级文本交互界面的推荐范式。
