Wie verschiebe ich ein div nach rechts (Wie die Eingabe caret) wie ich einen Buchstaben eintippe?

Question

Ich versuche, eine benutzerdefinierte Eingabe Caret zu erstellen. Ich habe etwas erreicht, aber das ist noch nicht alles.
Ich wollte benutzerdefinierte blinkende Animation und ich habe es. Aber jetzt möchte ich, dass mein Custom Caret sich auf der rechten Seite bewegt, während ich etwas eintippe (wie der echte Caret).
BTW Ich verwende ein <i> Element, um den Effekt von echtem Caret zu imitieren.
Unten ist mein Arbeitscode.

.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>

Jeder kann Javascript/Jquery für diese vorschlagen?
Vielen Dank! :)

Answer 1

Wenn Sie sich leisten können einige ältere Browser auszuschließen, dies zu tun:

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

Die Spanne wird sich ein editierbares Feld, als wir fügen contentEditable Attribut zu. Möglicherweise müssen Sie etwas zusätzliches CSS verwenden, um es richtig zu formatieren, aber es wird automatisch die <i></i> während der Eingabe verschieben - solange Sie keine Breite auf rq-form-element setzen.