Reemplazar el value de un input carácter por carácter con lo que ingresa el usuario

Espero que puedan ayudarme.
Intento reemplazar el formato predefinido de un input que tengo por el valor que el usuario ingresa. La idea es que reemplace la cadena carácter por carácter empezando siempre desde el inicio pero no lo he logrado hacer.
Este es mi input:

<div class="col-md-4">
                                <label for="inputName5" class="form-label">Téléphone</label>
                                <input type="text" class="form-control" id="tel" value="xxxxxxxx" pattern="[0-9]{8}" minlength="8" maxlength="8">
                            </div>

Lo que intenté hacer con JavaScript es el siguiente:

<script>
    var input = document.querySelector('input');
    var log = document.getElementById('tel');

 for (var i=0; i<log.length; i++){
     log.addEventListener('input', updateValue);
    function updateValue(e) {
        log[i].textContent.replace(e.target.value);
    }}
</script>

pero no me funcionó. ¿Alguien de buena fe que me pueda apoyar? Gracias de antemano.