Question

我在某些情况下看到，当他们开始在输入内输入时，他们的占位符问题并没有消失。这实际上就是我想要的。

在我的注册表格中，我有一个“24 - 3 + 6 =？”形状的验证码验证。

我想要做的是让这个计算不在输入之外，但实际上在里面，并且在计算之后输入用户的答案（通过在输入中设置填充左边以使文本在计算之后开始）

即使用户开始输入，是否可以让我的占位符坚持下去？

如果你有一个干净的选择，我欢迎其他人的建议。

一如既往，非常感谢你的帮助！

Answer 1

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

在输入时使占位符不会消失

1 个答案: