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

Question

我做了一个简单的比特币价格检查器，一位用户报告输入字段显示不正确：

在我的 PC 上，Firefox 和 Chrome 运行良好，但由于某些原因，它可能看起来不应该如何：

我还尝试了移动设备、手机和平板电脑，它们也都运行良好。 现在我正在使用 JavaScript 来确定输入字段的大小属性，但似乎并不适合所有人。 另一种解决方案是使用 css 并删除 size 属性。 Sience 我没有使用 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);