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

2019年7月22日 230次阅读

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

在我的注册表格中,我有一个“24 – 3 6 =？”形状的验证码验证.

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

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

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

一如既往,非常感谢您的帮助！

最佳答案 将等式和输入放在容器中,然后将容器设置为看起来像输入,输入看起来正常.

.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>
点赞