Как "на лету" перезаписать вводимый в input формы телефон? Требуется "подхватить" ввод, изменить и сразу вставить обратно

Question

опытные коллеги!

Стоит задача отредактировать и изменить номер телефона мгновенно с вводом номера в форму (до нажатия кнопок). Данные удается извлечь, но сразу же перезаписать обратно в измененном виде не выходит.. Намекните, пожалуйста, что не так делаю..

<div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="text" data-format="+7nnnnnnnnnnnnnnn" class="form-control" id="telefon" placeholder="Password"  value="situation" oninput="testFunction()">
  </div>
  <p id = "info" ></p>
  <script>
function testFunction() {
    
    let x = document.getElementById("telefon").value;
    document.getElementById("info").innerHTML = "Вы набираете следующий текст: " + "+7".concat(x);
    x.concat("+7");
    console.log(x);

if(numbers[0] == 8) numbers= numbers.substring(1);
}
</script>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Answer 1

document.addEventListener('DOMContentLoaded', () => {
    const input = document.querySelector('#telefon');

    const info =  document.querySelector('#info');

    if(input && info) {
        input.addEventListener('input', (event) => {

            const currentElement = event.currentTarget;

            if(currentElement.value.length && currentElement.value[0] === '8') {
                currentElement.value = `+7${currentElement.value.substring(1)}`;
            }

            info.innerHTML = `Вы набираете следующий текст: ${currentElement.value}`;
        })
    }
})

БЛОГ НА HUSL

Как "на лету" перезаписать вводимый в input формы телефон? Требуется "подхватить" ввод, изменить и сразу вставить обратно

Ответы (1 шт):