如何在输入字母时移动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才能正确设置它，但只要您未将宽度设置为rq-form-element，它就会自动移动<i></i>。