延迟输入占位符的重新出现

Question

如果你有一个输入字段，你可以启用占位符属性。因此，如果你写了一些东西，文本将消失，直到所有的东西都被删除，然后它再次出现。我的问题是：是否可以在真正的文本被删除后，延迟占位符文本的重新出现？

Answer 1

你是否可以在占位符上添加一个动画，改变它的可见性，使其从 hidden 到 visible.

在下面的例子中，占位符文本在延迟1秒后显示。

::placeholder {
  visibility: hidden;
  animation: showAfterDelay 0.2s ease 1s forwards;
}

@keyframes showAfterDelay {
  from { visibility: hidden; }
  to { visibility: visible; }
}

input {
  font-size: 1.2rem;
  padding: 5px;
}

<input type="text" placeholder="email"/>