延迟输入占位符重新出现

【问题标题】：Delay input placeholder re-appearance延迟输入占位符重新出现
【发布时间】：2020-12-04 00:00:44
【问题描述】：

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

【问题讨论】：

【解决方案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;
}

&lt;input type="text" placeholder="email"/&gt;

【讨论】：