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

Question

I made a simple bitcoin price checker and one user reported that the input field is not showing properly:

On my PC, Firefox and Chrome is working fine but for some reasons for others it may not look how it should:

I also tried on mobile devices, my phone and my tablet and there are working fine as well. Right now I'm using JavaScript to determine the size attribute for input field but seems to not work properly for everybody. Another solution is with css and removing the size attribute. Sience I have no experience with JavaScript how can I do it?

My 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

Ok so I end up removing size attribute which was something that I was looking for and I switched my JavaScript to add the width without changing my JavaScript with something complicated from the answers to my question because I don't really understand them. I added this.

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

15 = the padding

data.length = the number of my value output length.

16 = the number of pixels per character according to my font family and font size.

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

If you need to change width of that field you can do it by multiplying number of characters by some number. For example if you think one character can be 8 pixels wide, do it this way:

Please note that this example work only if variable data.length is returning length of price.

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