入力の値の長さに対応する入力の幅を調整する

Question

私は入力のような自動サイズ変更をしようとしています。ユーザーが入力するときのように、入力は入力内の値に合わせて自動的に調整されます私はそれを正しいものにするか、働くことができないようです。任意のアイデアは、助けてください？

$(document).ready(function(){ 
 
    $('input').on('input',function(){ 
 
    $(this).css('width',$(this).width()+$(this).val().length); 
 
    }); 
 
});

input{border:1px solid red;width:30px;}

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

 

 

 
<input type="text">

Answer 1

それは多分30px緩衝液で、同じように広い、必要であるためにあなたの目標であれば、問題はあなたがだ幅に毎回を追加することなく、それをゼロから再計算する。また、文字の幅がどれくらいあるかを知っていれば助けになるでしょう。おそらく、フォントサイズを特に設定したり、別の隠し要素を使ってレンダリングされたテキストの幅を測定したりするのが最も良いでしょう。ここで私はそのためのspanを使用します。

$(document).ready(function(){ 
 
    $('input').on('input',function(){ 
 
    var $this = $(this); 
 
    // Get the value 
 
    var val = $this.val(); 
 
    
 
    // Put it in the hidden span using the same font information 
 
    var $hidden = $(".hidden"); 
 
    $hidden.text(val); 
 
    
 
    // Set the input to the span's width plus a buffer 
 
    $this.css('width', $hidden.width() + 30); 
 
    }); 
 
});

input { 
 
    border:1px solid red; 
 
    font-size: 14px; 
 
    width:30px; 
 
} 
 
.hidden { 
 
    font-size: 14px; 
 
    display: none; 
 
}

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

Answer 2

私はこのケースでcontenteditable-spanを使用することをお勧めし、私はそれが役に立てば幸い。

#test{border:1px solid red;width:30px;}

<span id="test" contenteditable>I'm trying to make an auto resize like input</span>