javascript - 未聚焦时如何模拟输入值文本右侧的闪烁光标

Question

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

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

我该怎么做？

我想到了一个<span>包装 |字符并随动画一起闪烁，但不能将 html ( <span> ) 作为 value 属性的值或部分值。

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

Answer 1

我认为您在跨度包装“|”的想法上走在了正确的轨道上 Angular 色，并对其进行动画处理。如果你可以把它放在你的输入元素之后，那么当输入有焦点时你可以使用通用的兄弟选择器隐藏它(否则你有两个光标)，并且绝对将它放在父元素内以出现在输入的顶部元素。

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

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

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

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

然后你会做绝对定位和动画本身。听起来你很熟悉动画过程，所以我不会在这里详细介绍，但我正在链接到一个执行此操作的 CodePen 演示，以防你也需要查看一些代码。

http://codepen.io/rjenkins/pen/sJhHB