Question

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

使用标准HTML占位符是否可以实现？我怎么能实现这个目标？

由于

Answer 1

我认为您不能仅使用标准占位符来执行此操作，但您可以使用此示例http://css-plus.com/2011/09/make-the-input-placeholder-user-friendly/

Answer 2

这对于标准 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>

Answer 3

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

<强> CSS

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

demo

您可以使用transition使其顺利对齐。

但问题的一个解决方案是将占位符中的文本写入span并在用户开始键入时将其翻译为右（使用JS）

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

3 个答案: