javascript - 防止文本在输入框中移动

Question

这在主要问题列表中排名靠后，但我正在尝试制作一个邮政编码输入框，其下方有一个带有五个长破折号的边框图像，如下所示:

document.getElementById("zip_entry").focus();

#zip_entry_container {
  text-align: center;
  background-color: black;
  color: white;
  padding-bottom: 30px;
  padding-top: 20px;
}

input {
  font-family: monospace;
  display: block;
  margin: 0 auto;
  color: white;
  background-color: black;
  outline: none;
  padding: 0;
  width: 238px;
  border: none;
  font-size: 80px;
  height: 60px;
  text-align: left;
}

img {
  width: 238px;
}

<div id="zip_entry_container">
  <input id="zip_entry" type="text" maxlength=5 pattern="\d*" />
  <img src="/image/8kNE4.png" />
</div>

非常简单，对吧？ Here's a CodePen demo

我在 CSS 中仔细对齐了输入及其下方的图像，以便使用等宽字体，数字与它们下方的破折号完全对齐，直到输入第五位数字，此时，即使我已经设置maxlength 为 5，数字都向左移动几个像素。这是一个 video了解我的意思，或者您可以在 CodePen 链接中自行查看。

我可以忍受这个问题，但我发现它真的很烦人。关于如何防止这种默认行为的任何想法？我试过弄乱 keydown 并防止事件冒泡，但它不会阻止浏览器移动文本——当您失去焦点时文本会移回正确的位置。

如果光标在破折号的中心对齐，我也很喜欢，但我能想到的唯一方法是连续输入五个，尝试这样做会导致各种令人头疼的问题一堆事件监听器，用于将焦点切换到 keyup 上的下一个兄弟，切换到退格键上的 previous sibling ，否则重写输入框的所有功能。

更新:我认为我可以通过在输入第五位数字时立即调用 .blur() 来解决这个问题，但转换仍然会在一瞬间发生。啊!

Answer 1

一个主要问题(尤其是在浏览器兼容性方面)是，font-family: monospace 导致根据操作系统和浏览器应用不同的字体(参见 MDN )。在提供的 Codepen 中，Windows 上的 Chrome 将使用 Consolas，而 Firefox 似乎使用 Courier New。如果使用不同的字体，字母将具有不同的宽度，因此会导致字母未对齐。

如果文本输入对其内容来说太大，文本将向左移动(正如@Vadim Ovchinnikov 已经提到和解释的那样)。为避免这种情况，必须有足够的空间供光标使用。使用 5ch 作为宽度单位对我来说是一个很好的解决方案。

综合起来:

https://codepen.io/MattDiMu/pen/JyKodN