Auto-scaling issue: it is scaling with character's count

Question

I want to change a input text size when I change its value.

I have this javascript:

jQuery(document).ready(function ($) {

    function resizeInput() {
        $(this).attr('size', $(this).val().length);
    }

    $('input[type="text"]')
        // event handler
        .keyup(resizeInput)
        // resize on page load
        .each(resizeInput);

    document.getElementById("uploadBtn").onchange = function ()
    {
        document.getElementById("uploadFile").value = this.value;
        $("#uploadFile").attr('size', $("#uploadFile").val().length);
    };
});

First, I have test $('input[type="text"]') with resizeInput function. But it doesn't work.

Next, I have added that function to document.getElementById("uploadBtn").onchange = function () but it also doesn't work.

I want to resize input field uploadFile when I do this: document.getElementById("uploadFile").value = this.value;

How can I auto-scale an input size when I assign it a new string? Now it is autoscaling but it changes input's size with string characters count, and this is not what do I want to do.

I have used this SO answer as inspiration.

I have added this JSFiddle but I'm getting an error.

Answer 1

Try this: change size value as per length of value entered.

$(function(){
  $("input[type='text']").keyup(function(){
     var value = $(this).val();
     $(this).attr("size",value.length);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">

Actually your code should work. You have define javascript function inside document.ready, just move it outside or make it jquery function.

jQuery(document).ready(function ($) {
  $("input[type='text']").keyup(resizeInput);
});
function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">