如何让HTML输入框光标定位在居中placeholder开头且保持占位符居中？

嘿，这个需求确实有点绕——既要让占位符居中显示，又要让光标一开始就停在占位符文本的开头（不是输入框最左边也不是中间），纯CSS搞不定，得结合点JS来精准控制，下面是一步步的实现方案：

第一步：先搞定占位符的居中样式 #

先保留你原有的输入框基础样式，专门给占位符加居中对齐的CSS，确保它始终乖乖居中：

#input_query {
  width: 100%;
  text-align: center; /* 先让输入框整体居中，后面会调整输入文本的对齐 */
  autofocus: true;
  autocomplete: off;
  /* 保留你原有的其他样式 */
}

#input_query::placeholder {
  text-align: center; /* 强制占位符居中，不受输入框后续文本对齐的影响 */
}

第二步：用JS精准定位光标 #

页面加载完成后，我们得先算出占位符文本的宽度，再把光标挪到它的起始位置：

document.addEventListener('DOMContentLoaded', function() {
  const inputBox = document.getElementById('input_query');
  
  // 搞个临时的span标签，用来计算占位符文本的实际宽度（得和输入框用一样的字体样式哦）
  const tempCalcSpan = document.createElement('span');
  tempCalcSpan.textContent = inputBox.placeholder;
  tempCalcSpan.style.font = getComputedStyle(inputBox).font;
  tempCalcSpan.style.visibility = 'hidden';
  tempCalcSpan.style.position = 'absolute';
  document.body.appendChild(tempCalcSpan);
  
  // 算一下输入框总宽度和占位符宽度的差值，除以2就是我们需要的偏移量
  const totalInputWidth = inputBox.offsetWidth;
  const placeholderTextWidth = tempCalcSpan.offsetWidth;
  const scrollOffset = (totalInputWidth - placeholderTextWidth) / 2;
  
  // 用完临时标签就删掉它
  document.body.removeChild(tempCalcSpan);
  
  // 把光标定位到输入框的起始位置，然后滚动输入框到偏移量的位置，这样光标就正好在占位符开头啦
  const textRange = document.createRange();
  const selection = window.getSelection();
  textRange.setStart(inputBox.firstChild, 0);
  textRange.setEnd(inputBox.firstChild, 0);
  selection.removeAllRanges();
  selection.addRange(textRange);
  
  inputBox.scrollLeft = scrollOffset;
});

第三步：可选优化——输入时的文本对齐 #

如果你希望用户开始输入后，文本从光标位置左对齐（而不是继续居中），可以加个CSS小技巧，再配合JS把占位符宽度存成变量：

#input_query:not(:placeholder-shown) {
  text-align: left;
  padding-left: calc((100% - var(--placeholder-width)) / 2);
}

然后在刚才的JS代码里，算完占位符宽度后加一行：

inputBox.style.setProperty('--placeholder-width', `${placeholderTextWidth}px`);

这样一来，页面加载时光标精准卡在占位符的第一个字符前面，占位符保持居中，用户输入的文本也会从这个位置开始整齐排列～

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