html - 使占位符在键入时不消失

Question

我曾在某些情况下看到人们在开始在输入框内输入时占位符没有消失的问题。这正是我想要的。

在我的注册表单上，我有一个形状为“24 - 3 + 6 = ?”的验证码验证

我想要做的是让这个计算器不在输入之外，而是在输入内部，并且用户的答案将在计算之后输入(通过在输入中设置 padding-left 使文本在计算之后开始) .

是否可以让我的占位符在用户开始输入时保持不变？

如果您对我正在尝试做的事情有一个干净的替代方案，也欢迎其他建议。

一如既往，非常感谢您的帮助!

Answer 1

将等式和输入放在一个容器中，然后将容器设置为看起来像输入，然后将输入设置为看起来正常。

.captcha {
  display: inline-block;
  padding: 0.2em;
  background-color: white;
  border: 1px solid #A9A9A9;
}

.placeholder {
  color: #A9A9A9;
}

.answer {
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
}

<div class="captcha">
  <label class="placeholder" for="answer-1">24 - 3 + 6 = </label>
  <input id="answer-1" class="answer" type="number" name="answer-1">
</div>
<div class="captcha">
  <label class="placeholder" for="answer-2">(24 - 3 + 6) * (1579 - 41 + 2) = </label>
  <input id="answer-2" class="answer" type="number" name="answer-2">
</div>