使占位符在键入时不消失

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>