jquery - 如何在输入字母时向右移动一个 div(如输入插入符号)？

Question

我正在尝试创建自定义输入插入符。我取得了一些成就，但这还不是全部。
我想要自定义闪烁动画，我明白了。但现在我希望我的自定义插入符号在我键入任何内容时在右侧移动(就像真正的插入符号一样)。
顺便说一句，我正在使用 <i>元素模仿真实插入符号的效果。
以下是我的工作代码。

.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 {
   caret-color: transparent;
}

@keyframes blink {
   from { height: 0%;
          top: 50%;}
   to { height:80%;
        top:10%;}
}

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

有人可以为此推荐 Javascript/Jquery 吗？
非常感谢! :)

Answer 1

如果您有能力排除一些较旧的浏览器，那么这样做:

<div>
  <span class="rq-form-element" contentEditable></span>
  <i></i>
</div>

随着我们添加 contentEditable，跨度将变成一个可编辑字段归于它。您可能必须使用一些额外的 CSS 来正确设置样式，但它会自动移动 <i></i>在您键入时 - 只要您不将宽度设置为 rq-form-element .