Question

如何模拟输入字段值文本右侧的闪烁光标，即使它模糊了？

在聚焦时，该字段会获得闪烁的光标，但我希望它在两种状态下显示。

我该怎么做？

我想到了<span>包裹了|字符和闪烁的动画，但不能有html（<span>）作为值属性的值或部分值。

我知道一个快速的解决方案是聚焦或自动聚焦这个领域，但我不能把它作为该领域的焦点，其他事情发生。

Answer 1

我认为你走在正确的轨道上的想法是跨度包裹“|”角色，并为其制作动画。如果你可以将它放在输入元素之后，那么你可以使用通用兄弟选择器在输入具有焦点时隐藏它（否则你有两个光标），并且绝对将它放在父元素内以显示在输入的顶部元件。

所以你的HTML看起来像这样：

<div id="container">
<input id="input"> </input>
<span id="mock-cursor">|</span>
</div>

当输入具有焦点时隐藏光标在CSS中是这样的：

input:focus ~ #mock-cursor {
    display: none;
}

然后你会做绝对定位和动画本身。听起来你对动画过程很熟悉，所以我不会在这里详细介绍，但我会链接到一个CodePen演示，这样做，以防你需要看到一些代码。< / p>

Answer 2

您可以使用focus()执行该任务。无需使用动画角色（|）。