如何在輸入字母時移動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>。