javascript - 如何在用户输入时保持输入占位符可见

Question

我有一个新的有趣的要求。占位符不应在用户开始输入时消失，而应保持可见并移至输入框的右侧。

这甚至可以用标准的 HTML 占位符实现吗？我怎样才能做到这一点？

谢谢

Answer 1

这对于标准 HTML 占位符是不可能的，因为它的 native 行为正在消失。但是，您可能需要考虑添加一个元素来充当占位符，并添加一个 CSS 选择器来感知用户何时开始键入 (:placeholder-shown) 并将其向右移动。

这是可能的做法:

.wrapper {
  position: relative;
  font-family: sans-serif;
  font-size: 14px;
  width: max-content;
}

.placeholder {
  position: absolute;
  right: 4px;
  top: 2px;
  pointer-events: none;
  opacity: .5;
}

.input:placeholder-shown + .placeholder {
  /* if real placeholder is shown - hide fake placeholder */
  opacity: 0;
}

<div class="wrapper">
  <input type="text" class="input" placeholder="Test">
  <div class="placeholder">Test</div>
</div>