I am trying to create an effect in which a circle follows the new entered text
Like: As I type 'H', the circle is behind it, then when I press 'e', the text now visible is 'He' but the circle is behind 'e' now. And this process continues.
The text will be entered in a <textarea> and this text coveres half the page.
This is a website and If possible please give the answers with HTML, CSS and Vanilla JS as I haven't learnt JQuery or any other Framwork, Library, etc.
In a textarea element I think it is not possible without further ado. But you can use an input element instead. I have built a small prototype that shows you how to do it.
const op = document.querySelector('.output');
function make() {
const ta = document.querySelector('#textarea input');
op.innerHTML = ta.value;
const nw = ta.value.length < 1 ? 1: ta.value.length;
ta.size= parseInt(nw);
}.w {
text-align: center;
}
.output {
background: lightgray;
font-size: 10px;
border-radius: 25px;
padding:5px;
margin-bottom: auto;
}
#textarea{
border:1px solid #eee;
display: flex;
gap: 10px;
}
#textarea input{
border:none;
background:none;
font-size:1.2em;
padding:6px;
}
#textarea input:focus{
outline:none;
} <div id="textarea" oninput="make()">
<input size="1" type="text" value=""/>
<div class="output"></div>
</div>