闪烁的输入光标

Question

我在制作输入光标闪烁方面遇到了麻烦。你如何制作一个动画，让输入框（占位符）内的光标“|”不停地闪烁？ 我现有的代码是这样的：

<input type="text" class="rq-form-element" placeholder="|"/>

我不知道如何开始。有任何建议吗？

- Tadej Bogataj

---

占位符="|"将只是在文本框中添加字符串“|”并使其变灰，它不会添加任何动画。您需要添加一些JS并可能创建自定义元素。 - mbeso

你需要在文本框中进行自动对焦，占位符的目的不同。 - Nitin Dhomse

Answer 1

只需添加 autofocus 属性即可。点击这里查看链接here

<input type="text" class="rq-form-element" autofocus/>

autofocus 属性是一个 boolean 类型的属性。当存在时，它指定一个元素在页面加载时应自动获得焦点。

- Chaitali

---

简单高效 - Ivandez

为什么费力地做动画，而不是采取简单的方法呢？这就是正确的答案。 - Tintin81

Answer 2

尝试这个解决方案

<div class="cursor">
<input type="text" class="rq-form-element" />
<i></i>
</div>

CSS

.cursor {
    position: relative;
}
.cursor i {
    position: absolute;
    width: 1px;
    height: 80%;
    background-color: gray;
    left: 5px;
    top: 10%;
    animation-name: blink;
    animation-duration: 800ms;
    animation-iteration-count: infinite;
    opacity: 1;
}

.cursor input:focus + i {
    display: none;
}

@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0; }
}

现场演示 - https://jsfiddle.net/dygxxb7n/

- grinmax

---

不要忘记添加 user-select: none 以禁用光标本身的文本选择。谢谢。 - 1-14x0r

理想情况下，我希望能够使用自定义光标。是否有一种方法可以在输入时同时使用样式为.cursor i的光标移动？它似乎在开始键入后默认为原始光标，因为有一个焦点选择器显示为无。 - portatlas

Answer 3

不确定这是否符合您的要求，但您可以进行设置。

caret-color: currentColor;

并且它将与该元素中的文本颜色相同。当然，您也可以将其设置为任何颜色。希望您能将初始光标与用户聚焦时的实际光标动画匹配起来。

- Ceecee Hart