如何让contenteditable元素实现类Linux终端密码框的隐藏文本效果？

针对你的需求，其实不用复杂的JS，通过CSS就能完美解决——核心是隐藏文本但保留可见光标，你之前踩的坑是把文本颜色设成了背景色，导致光标也跟着消失，换个思路就好：

• 用color: transparent让输入的文本完全透明（看不到，但元素布局不受影响）
• 用caret-color显式指定光标颜色，确保它在黑色背景上清晰可见

修改后的CSS代码如下：

.input { display: inline; }
body { background-color: black; }
#field-in {
  color: transparent; /* 隐藏输入的文本内容 */
  caret-color: #ffffff; /* 单独设置光标为白色 */
  outline: none;
  display: inline-block;
  min-width: 1em; /* 确保初始状态下有可点击编辑的区域 */
}

对应的HTML结构可以保留你原来的写法，初始的 能保证元素一开始就有可编辑的空间：

<div class="input">
  <span id="field">
    <span id="field-name">Invisible Text:</span>
    <span id="field-in" contenteditable>&nbsp;</span>
  </span>
</div>

为什么这个方案可行？ #

• color: transparent只会隐藏文本内容，不会破坏inline-block的自适应宽度和布局特性
• caret-color是专门控制光标颜色的属性，和文本颜色完全独立，所以光标能正常显示在黑色背景上
• 纯CSS实现，没有JS带来的输入延迟或性能问题，体验更流畅

兼容性降级方案（适配旧浏览器） #

如果需要兼容不支持caret-color的旧浏览器（比如IE），可以用JS模拟终端密码框的行为：监听输入事件，把用户输入的内容替换为占位符（比如星号*），同时把真实的密码值存在元素的data-*属性里。

示例JS代码：

const passwordField = document.getElementById('field-in');

passwordField.addEventListener('input', function(e) {
  // 从data属性获取真实密码，初始为空
  let realPassword = this.dataset.realPassword || '';
  const inputChar = e.data;

  if (inputChar) {
    // 输入字符时：追加到真实密码，显示内容替换为星号
    realPassword += inputChar;
    this.dataset.realPassword = realPassword;
    this.textContent = '*'.repeat(realPassword.length);
  } else {
    // 退格时：删除真实密码的最后一位，更新显示内容
    realPassword = realPassword.slice(0, -1);
    this.dataset.realPassword = realPassword;
    this.textContent = realPassword ? '*'.repeat(realPassword.length) : ' ';
  }

  // 强制光标保持在内容末尾
  const range = document.createRange();
  const selection = window.getSelection();
  range.selectNodeContents(this);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);
});

这种方式虽然依赖JS，但能在所有浏览器上正常工作，完全模拟终端密码框的视觉效果。

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