Javascript 如何模拟输入值右侧闪烁光标'；不聚焦时的文本

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

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

我该怎么做

我想到了一个

包装|角色并随着动画闪烁，但是不能有html（

）作为value属性的值或部分值

---

我知道一个快速的解决方案是聚焦或自动聚焦字段，但我不能这样做，因为在字段聚焦时，会发生其他事情。

您可以使用

focus（）

来完成该任务。不需要使用动画角色（|）

我认为你的想法是正确的，用一个跨距包装一个“|”角色，并为其设置动画。如果可以将其放置在输入元素之后，则可以在输入具有焦点时使用常规同级选择器将其隐藏（否则您有两个光标），并将其绝对定位在父元素中，以显示在输入元素的顶部

因此，您的HTML将如下所示：

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

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

---

@aldanux输入右侧的一个闪烁字符，但输入的值比输入的宽度小得多。您试图阻止的“其他事情”是什么？我的意思是。。。显示一些您尝试过的代码。。。如果你能做一个

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