延迟输入占位符重新出现

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

延迟输入占位符重新出现

Delay input placeholder re-appearance

css

placeholder