如何根据值长度更改输入宽度

Question

我做了一个简单的bitcoin price checker，一个用户报告输入字段显示不正确：

在我的PC上，Firefox和Chrome可以正常工作，但是由于其他原因，它可能看起来不应该这样：

我也在移动设备，手机和平板电脑上进行了尝试，并且工作正常。现在，我正在使用JavaScript来确定输入字段的size属性，但似乎不适用于每个人。另一个解决方案是使用CSS并删除size属性。沉默我没有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>

编辑

好吧，所以我最终删除了我一直在寻找的size属性，我切换了JavaScript以添加宽度而不更改JavaScript，但问题与答案的答案却有些复杂，因为我不太了解它们。我添加了这个。

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

15 =填充

data.length =我的值输出长度的数量。

16 =根据我的字体家族和字体大小，每个字符的像素数。

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);