如何实现用户名输入框类密码遮蔽且显示1-2个字符？

要实现用户名输入框大部分字符像密码框一样遮蔽，仅显示1-2个字符的效果，我们可以通过隐藏原生输入框，用模拟文本框展示遮蔽内容，同时同步真实输入值的方式实现，具体代码如下：

完整代码实现 #

HTML 结构 #

<p2>
  <label for="name">Username </label>
  <!-- 真实输入框，隐藏以存储实际输入值 -->
  <input type="text" id="real-username" name="username" style="display: none;" />
  <!-- 模拟显示框，用于展示遮蔽后的效果 -->
  <input type="text" id="display-username" readonly />
</p2>

<p2>
  <label for="pwd">Password </label>
  <input type="password" name="pwd" />
</p2>

CSS 样式 #

/* 全局输入框基础样式 */
input {
  width: 40%;
  height: 30px;
  position: relative;
  top: -4px;
  font-size: 20px;
  padding: 0 .3em;
  color: #555555;
}

input[type="password"] {
  color: #000;
}

/* p2标签样式 */
p2{
    position: relative;
    left: -65px;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    text-align: center;
}

/* 模拟输入框的光标处理 */
#display-username {
  caret-color: transparent; /* 隐藏只读框的光标 */
}

JavaScript 逻辑 #

const realInput = document.getElementById('real-username');
const displayInput = document.getElementById('display-username');

// 同步输入内容并处理遮蔽逻辑
realInput.addEventListener('input', function() {
  const value = this.value;
  if (value.length <= 2) {
    // 输入长度≤2时，直接显示全部内容
    displayInput.value = value;
  } else {
    // 输入长度>2时，用●遮蔽前面的字符，仅保留最后2个可见
    const maskedPart = '●'.repeat(value.length - 2);
    const visiblePart = value.slice(-2);
    displayInput.value = maskedPart + visiblePart;
  }
});

// 点击模拟框时聚焦真实输入框，保证输入触发
displayInput.addEventListener('click', function() {
  realInput.focus();
});

// 同步键盘事件，确保退格、方向键等操作正常
displayInput.addEventListener('keydown', function(e) {
  realInput.focus();
  setTimeout(() => {
    const event = new KeyboardEvent('keydown', {
      key: e.key,
      code: e.code,
      keyCode: e.keyCode,
      which: e.which,
      bubbles: true
    });
    realInput.dispatchEvent(event);
  }, 0);
});

核心逻辑说明 #

• 真实输入框#real-username负责存储用户的实际输入内容，通过display: none隐藏；
• 模拟输入框#display-username仅用于展示遮蔽效果，设置为readonly避免用户直接编辑；
• 根据输入长度动态切换显示逻辑：短内容全显，长内容仅保留最后2个可见字符，其余用遮蔽符替代；
• 通过点击聚焦、键盘事件同步，让用户操作体验和原生输入框一致。

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