求实现模拟方向键的按钮点击事件：仅移动光标不删除文本

嘿，这个需求很好实现！我来帮你把光标前后移动的功能加上，完全不会改动原有文本～

首先得说下原理：HTML文本输入框的光标位置是由selectionStart和selectionEnd这两个属性控制的——当这两个值相等时，就代表当前光标的位置；如果不等，那就是选中了一段文本。咱们要做的就是调整这两个值，再让输入框聚焦，就能实现光标移动啦。

完整代码示例 #

先给你整合好的完整HTML+JavaScript代码，包含你原来的退格功能，加上新增的光标移动按钮：

<input id="user" type="text">
<button type="button" onclick="setBack()">退格</button>
<button type="button" onclick="moveCursorLeft()">← 左移光标</button>
<button type="button" onclick="moveCursorRight()">右移光标 →</button>

<script>
// 原有退格功能（优化了重复DOM查询）
function setBack() {
  const input = document.getElementById('user');
  input.value = input.value.substring(0, input.value.length - 1);
}

// 左移光标函数
function moveCursorLeft() {
  const input = document.getElementById('user');
  // 获取当前光标/选中内容的起始位置
  const currentPos = input.selectionStart;
  // 左移后不能小于0，避免光标跑到输入框外
  const newPos = Math.max(currentPos - 1, 0);
  // 设置光标位置，同时让输入框获得焦点确保效果可见
  input.selectionStart = input.selectionEnd = newPos;
  input.focus();
}

// 右移光标函数
function moveCursorRight() {
  const input = document.getElementById('user');
  const currentPos = input.selectionStart;
  // 右移后不能超过文本总长度
  const newPos = Math.min(currentPos + 1, input.value.length);
  input.selectionStart = input.selectionEnd = newPos;
  input.focus();
}
</script>

代码细节说明 #

• 左移光标：先获取当前光标位置（如果有选中内容，就以选中区域的起始位置为准），减1后用Math.max限制最小值为0，保证光标不会跑到输入框左侧之外，最后同步设置selectionStart和selectionEnd并聚焦输入框，让光标移动效果立刻显示。
• 右移光标：逻辑和左移类似，加1后用Math.min限制最大值为文本总长度，避免光标跑到输入框右侧之外。
• 我还给你的退格函数做了小优化：把输入框元素先存起来，不用重复调用getElementById，执行效率更高～

你直接复制这段代码测试就行，点击左右按钮，光标就会在文本里前后移动，完全不会修改输入的内容哦！

内容的提问来源于stack exchange，提问作者Jonny