Как изменить ширину ввода в зависимости от длины значения

Question

Я сделал простую проверку биткойнов , и один пользователь сообщил, что поле ввода не отображается должным образом:

На моем ПК Firefox и Chrome работают нормально, но по некоторым причинам другие могут выглядеть не так, как должны:

Я тоже пробовал на мобильных устройствах, моем телефоне и планшете, и там тоже все нормально работает. Сейчас я использую JavaScript для определения атрибута размера для поля ввода, но, похоже, не работает должным образом для всех. Другое решение - css и удаление атрибута размера. Наука У меня нет опыта работы с JavaScript, как я могу это сделать?

Мой JavaScript

function refresh_price() {
    $.ajax({
        url:"query.php?currency=USD"
    }).done(function(data) {
        $("#bitcoin_value").attr("value", data).attr("size", data.length - 2).addClass("highlight");
        setTimeout(function() {
            $("#bitcoin_value").removeClass();
        }, 500);
    });
}
refresh_price();
setInterval(refresh_price, 5000);

HTML

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

EDIT

Хорошо, так что в итоге я удалил атрибут размера, который я искал, и переключил свой JavaScript, чтобы добавить ширину, не меняя свой JavaScript с помощью чего-то сложного из ответов на мой вопрос, потому что я их не очень понимаю. Я добавил это.

.css("width", 15 + data.length * 16)

15 = отступы

data.length = номер выходного значения моего значения.

16 = количество пикселей на символ в соответствии с моим шрифтом familly и размером шрифта.

Answer 1

function fitInputToVal(input) {
	var el = $('<span>').hide().appendTo(document.body);
    el.text(input.val() || input.text() || input.attr('placeholder')).css('font', input.css('font'));
    var inputWidth = el.width();
    input.css({
        width: inputWidth
    })
}

$('#bitcoin_value').on('input', function() {
	fitInputToVal($(this));
}).trigger('input');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="bitcoin_value" placeholder="val here"></input>

Answer 2

Если вам нужно изменить ширину этого поля, вы можете сделать это, умножив количество символов на некоторое число. Например, если вы думаете, что один символ может иметь ширину 8 пикселей, сделайте это следующим образом:

Обратите внимание, что этот пример работает, только если переменная data.length возвращает длину цены.

function refresh_price() {
    $.ajax({
        url:"query.php?currency=USD"
    }).done(function(data) {
        $("#bitcoin_value").attr("value", data).attr("size", data.length - 2).addClass("highlight");
        $("#bitcoin_value").css('width', (data.length * 8) + 'px');
        setTimeout(function() {
            $("#bitcoin_value").removeClass();
        }, 500);
    });
}
refresh_price();
setInterval(refresh_price, 5000);