Изменение размера поля ввода по длине значения после запроса ajax

Question

Javascript

// Ajax refresh price value.
setInterval(function() {
    $.ajax({
        url:"query.php?currency=<?=$currencycode;?>"
    }).done(function(data) {
        $("#value").attr("value", data);
    });
},3000);

HTML

<input id="value" type="text" value="..." size="1" readonly>

вывод файла query.php

1234

Как сделать так, чтобы размер поля ввода изменился на длину результата вывода файла query.php, в моем случае 1234, размер тега ввода должен быть 4. Также анимация перехода, чтобы видеть изменения для каждого обновления, в моем случай каждые 3 секунды.

Answer 1

Используйте этот код, например:

<input id="counter" type="text" value="1234" size="7" readonly>
<script>
let init="1234";
let i = 5;
setInterval(function() {
     document.getElementById("counter").value=init;
     document.getElementById("counter").size=init.length + 4;
     init += i;
     i++;
},1000);
</script>

Answer 2

Попробуйте это

// Ajax refresh price value.
setInterval(function() {
    $.ajax({
        url:"query.php?currency=<?=$currencycode;?>"
    }).done(function(data) {
        $("#value").attr("value", data).attr("size", data.length);
    });
}, 3000);