自定义输入元素中实现光标随输入内容精准右移的解决方案

你遇到的光标偏移问题，核心原因是用固定像素值累加光标位置——哪怕是看起来等宽的字体，实际渲染时每个字符的宽度也可能因为浏览器渲染引擎、字体细节有细微差异，多次累加后误差就会越来越明显。要实现精准跟随，我们需要实时计算输入文本的实际宽度，让光标直接定位到文本末尾的位置。

具体修改步骤： #

1. 统一字体样式（关键前提）

首先确保输入文本容器#field和光标#cursor的字体属性完全一致，否则文本宽度计算会有偏差。修改你的CSS：

#field{
  color: white;
  text-align: center;
  font-size: 25px; /* 和cursor字号统一 */
  font-weight: 35; /* 和cursor字重统一 */
  font-family: sans-serif; /* 指定一致的字体族 */
  display: inline-block; /* 让元素宽度贴合文本内容，方便计算 */
  white-space: nowrap; /* 提前解决换行问题，文本不换行 */
  overflow: hidden; /* 超出容器时隐藏，可选 */
}

#cursor{
  text-align: initial;
  position: absolute;
  left: 0;
  font-weight: 35;
  font-size: 25px;
  color: #2E3D48;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

2. 重写光标定位逻辑

把原来固定累加marginNum的逻辑，改成实时计算文本宽度来定位光标。修改你的JavaScript：

// 初始化光标位置
window.onload = function(){
  const cursor = document.getElementById("cursor");
  const field = document.getElementById("field");
  // 计算初始居中偏移：页面一半宽度 - 文本容器初始宽度的一半（因为field是居中的）
  const initialOffset = screen.width / 2 - field.offsetWidth / 2;
  cursor.style.left = initialOffset + "px"; // 用left替代marginLeft，定位更精准
  cursor.style.cursor = "default";
};

// 修改movePosCursor函数
function movePosCursor(){
  const cursor = document.getElementById("cursor");
  const field = document.getElementById("field");
  const initialOffset = screen.width / 2 - field.offsetWidth / 2;
  // 光标位置 = 初始偏移 + 文本容器的实际宽度（即文本的总宽度）
  const cursorLeft = initialOffset + field.offsetWidth;
  cursor.style.left = cursorLeft + "px";
}

3. 调整文本添加逻辑（可选优化）

你的change函数可以稍微优化一下，避免重复获取DOM元素：

function change(){
  const field = document.getElementById("field");
  field.textContent += "a"; // 直接修改文本
  movePosCursor(); // 先更新文本再计算宽度，顺序不能反
  document.getElementById("cursor").style.visibility = "visible";
}

为什么这样有效？ #

• offsetWidth会返回元素实际渲染后的宽度，包含文本内容的真实宽度，完全适配当前字体和浏览器渲染效果，不会有固定像素的累积误差。
• 统一字体样式确保文本宽度计算和光标位置的基准一致，避免因字体差异导致的偏移。
• 用left属性定位光标比marginLeft更直接，减少布局干扰。

另外，关于你担心的未使用代码，比如checkCtrlA函数，如果暂时用不到可以先注释掉，后续确认没问题再删除，这样不会影响现有功能。

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