如何实现输入框内类占位符虚线的持久显示？占位符是否为合适方案？

阿华AIGC实验室

2026-4-29

方案1：CSS伪元素模拟始终显示的占位符

这是最简洁的方案，纯CSS实现，不需要JS。原理是给输入框的容器添加一个伪元素，把下划线内容放在伪元素里，让输入框的文字覆盖在伪元素上方，这样未输入的位置下划线始终可见。

修改你的代码如下：

<form action="#" class="form" name="form">
 <!-- 邮箱部分保持不变 -->
 <fieldset>
 <legend class="textform">Numer telefonu</legend>
 <div class="phone">
 <span class="tel">+48</span>
 <input class="forminput" type="tel" name="tel" id="tel" maxlength="9">
 </div>
 </fieldset>
</form>

添加对应的CSS：

.phone {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* 模拟下划线占位符的伪元素 */
.phone::after {
  content: "_ _ _ _ _ _ _ _ _";
  position: absolute;
  left: calc(2.5em + 8px); /* 调整这个值对齐+48后的位置，8px是span和input的间距 */
  color: #999;
  pointer-events: none; /* 确保伪元素不会干扰输入框的点击/输入 */
  letter-spacing: 0.25em; /* 调整间距让下划线和输入字符对齐 */
}

#tel {
  background-color: transparent; /* 透明背景，让伪元素的下划线显示出来 */
  border: none; /* 可以去掉默认边框，或者保留底部边框配合伪元素 */
  border-bottom: 1px solid transparent;
  padding: 0;
  letter-spacing: 0.25em; /* 和伪元素的间距保持一致，让输入的字符刚好覆盖下划线 */
  width: 8em; /* 根据下划线长度调整输入框宽度 */
}

这个方案的优势：

纯CSS实现，无需JS，兼容性好
下划线始终可见，输入的字符会精准覆盖对应位置的下划线
样式容易修改，直接调整伪元素的content、color、letter-spacing即可

方案2：拆分多个单字符输入框

如果需要更精准的字符位置控制（比如每个数字对应一个下划线），可以把9位数字拆分成9个单字符输入框，每个输入框的placeholder设为_，这样就算某个输入框有内容，其他空的输入框依然会显示下划线。同时用JS辅助实现焦点自动切换，提升输入体验。

代码示例：

<form action="#" class="form" name="form">
 <!-- 邮箱部分保持不变 -->
 <fieldset>
 <legend class="textform">Numer telefonu</legend>
 <div class="phone">
 <span class="tel">+48</span>
 <div class="phone-input-group">
   <input type="tel" maxlength="1" placeholder="_" class="phone-input">
   <input type="tel" maxlength="1" placeholder="_" class="phone-input">
   <input type="tel" maxlength="1" placeholder="_" class="phone-input">
   <input type="tel" maxlength="1" placeholder="_" class="phone-input">
   <input type="tel" maxlength="1" placeholder="_" class="phone-input">
   <input type="tel" maxlength="1" placeholder="_" class="phone-input">
   <input type="tel" maxlength="1" placeholder="_" class="phone-input">
   <input type="tel" maxlength="1" placeholder="_" class="phone-input">
   <input type="tel" maxlength="1" placeholder="_" class="phone-input">
 </div>
 </div>
 </fieldset>
</form>

CSS样式：

.phone-input-group {
  display: flex;
  gap: 0.3em;
  margin-left: 8px;
}

.phone-input {
  width: 1.2em;
  text-align: center;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
}

添加JS处理焦点切换：

const phoneInputs = document.querySelectorAll('.phone-input');

phoneInputs.forEach((input, index) => {
  // 输入字符后自动跳转到下一个输入框
  input.addEventListener('input', () => {
    if (input.value && index < phoneInputs.length - 1) {
      phoneInputs[index + 1].focus();
    }
  });

  // 按退格键且当前输入框为空时，跳转到上一个输入框
  input.addEventListener('keydown', (e) => {
    if (e.key === 'Backspace' && !input.value && index > 0) {
      phoneInputs[index - 1].focus();
      phoneInputs[index - 1].value = ''; // 可选：清空上一个输入框的内容
    }
  });
});

这个方案的优势：

每个数字位置的占位符独立，视觉上更清晰
用户输入时的位置感更强，适合固定长度的号码/验证码输入
可以单独控制每个输入框的样式

方案3：背景图像实现（不推荐，仅作补充）

你也可以制作一张包含9个下划线的背景图，设置为输入框的背景，让输入的文字覆盖在背景图上。不过这种方案的灵活性较差，修改下划线样式需要重新制作图片，所以一般不推荐，除非有特殊的视觉需求。

CSS示例：

#tel {
  background-image: url('underline-bg.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% auto;
  padding-left: 0;
  letter-spacing: 0.3em;
}