Otomatik ölçeklendirme sorunu: Karakterin sayımı

Question

ile ölçekleniyor Değerini değiştirdiğimde input text boyutunu değiştirmek istiyorum.

bu javascript vardır:

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

Birincisi, resizeInput fonksiyonu ile testini $('input[type="text"]') var. Ama işe yaramıyor.

Sonraki, bu işlevi document.getElementById("uploadBtn").onchange = function()'a ekledim, ancak aynı zamanda çalışmıyor.

Böyle yapınca ben girdi alanı uploadFile yeniden boyutlandırmak istediğiniz

: document.getElementById("uploadFile").value = this.value;

Nasıl I oto ölçekli ben yeni bir dize atamak bir giriş boyutu? Şimdi, otomatik ölçeklendirme, ancak girdi karakterinin dize karakter sayısıyla değiştiğini ve bunun ne yapmak istediğimi değil.

Bu SO answer'u ilham olarak kullandım.

Bu JSFiddle ekledim ama bir hata alıyorum.

Answer 1

Bunu deneyin: size değerini girilen değer uzunluğuna göre değiştirin.

$(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">

Aslında kodunuzu çalışması gerekir. Document.ready içerisindeki javascript fonksiyonunu tanımladınız, sadece dışarı taşı veya jQuery fonksiyonu yap. $ (bu) .attr (. 'büyüklüğü', $ (bu) .val() uzunluk) 'ait

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">