用户键入时如何保持输入占位符可见答案

【问题标题】：How to keep input placeholder visible when user is typing用户键入时如何保持输入占位符可见
【发布时间】：2013-10-31 05:32:33
【问题描述】：

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

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

谢谢

【问题讨论】：

标签： javascript html css placeholder

【解决方案1】：

这对于标准 HTML 占位符是不可能的，因为它会消失的本机行为。但是，您可能需要考虑添加一个元素以作为占位符，并添加一个 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>

【讨论】：

【解决方案2】：

我不确定是否可以在键入时保持占位符可见，但您可以使用此 css 将其向右移动：

CSS

.example:focus::-webkit-input-placeholder {
    text-align: right;
    opacity: 1;
}

demo

您可以使用transition使其平滑对齐。

但是解决您的问题的一种方法是将占位符中的文本写入一个跨度并在用户开始输入时将其转换为正确（通过使用 JS）

【讨论】：