时间戳

首页 > 解决方案 > 延迟输入占位符重新出现

css - 延迟输入占位符重新出现

问题描述

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

标签： cssplaceholder

解决方案

您可以在占位符上添加一个动画，将其可见性从 更改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"/>

推荐阅读