Jquery：読み取り専用のテキストボックス幅を動的に設定する

Question

私は読み取り専用のテキストボックスを持っており、その値はデータベースから来ています。 テキストの長さに基づいて幅を設定したいと思います。私は一度発射する他のイベントを利用したいの代わりOnkeypress()の...今、私は通常のテキストボックスと正常に動作しますevent..Which onkeypress()を持って

..テキストボックスは、DBから値を取得したら呼び出す必要がjQueryのイベントその読み取り専用テキストボックスに格納されている値。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<span><p>Hello, my name is </p></span> 
 

 
<span> <input id="txt" value="I am coming from db" readonly="readonly" class="form" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" type="text" > 
 
</span>

Answer 1

入力でsize属性を使用すると、幅は、あなたがそれをするとき、入力値の変化に合わせて作ることができるとkeypreechangeイベントを使用して、動的に収まるように制御することができます。

$('#txt').bind("keypress change ",function(){ 
 
$(this).attr('size',$(this).val().length); 
 
}); 
 
$('#change').click(function(){ 
 
    $('#txt').val('1234566').change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<span><p>Hello, my name is </p></span> 
 

 
<span> <input id="txt" value="12345" class="form" type="text"size='5' > 
 
</span> 
 
<button id="change"> change </button>

Answer 2

値が設定されている場合火災は、ドキュメントのロード$(document).ready(function(){});ではなく、サーバーサイド言語ではJavaScriptを通じて値を設定し、それに応じて長さを修正することができますことは、特定のイベントはありません。

それとも、これも変化が起こるために起こっている場合は、変更リスナーを設定することができますし、値を設定するたびに、それをトリガー：

var myValue = 'Any value'; 

// trigger change whenever you set a value 
$('#myInputId').val(myValue).trigger('change'); 

$('#myInputId').change(function(){ // fix the length }); 

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<script> 
 
    $(function(){ 
 
     $("#txt").change(function() {    
 
      $(this).attr('style', "width: " + (($(this).val().length + 1) * 8) + "px"); 
 
     }); 
 
     $("#txt").trigger("change"); 
 
    }) 
 
</script> 
 
<span><p>Hello, my name is </p></span> 
 

 
<span> <input id="txt" value="I am coming from db" readonly="readonly" class="form" type="text" > 
 
</span>

Answer 4

$('#txt').on('change', function() { 
 
\t $(this).width(($(this).val().length + 1) * 8); 
 
}); 
 

 
setTimeout(function() { 
 
    $('#txt').val('sdsds sdsdsdsd sddsdsdsdsds sddsdsds'); 
 
\t $('#txt').trigger('change'); 
 
}, 1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span><p>Hello, my name is </p></span> 
 

 
<span> <input id="txt" value="I am coming from db" readonly="readonly" class="form" type="text" > 
 
</span>

を

Answer 5

私はあなたが要素の後にscriptタグを追加することができ、正しく あなたの条件あなたはまた、文書準備の方法でそれを行うことができます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<span><p>Hello, my name is </p></span> 
 

 
<span> <input id="txt" value="I am coming from db" readonly="readonly" class="form" type="text" > 
 
</span> 
 
<script> 
 
var elelement = document.getElementById("txt"); 
 
elelement.style.width = ((elelement.value.length + 1) * 8) + 'px' 
 
</script>

以下のようにとにかく正常に動作します理解していれば

選択要素の幅を調整します。

$(document).ready(function() { 
    var element = document.getElementById("txt"); 
    element.style.width = ((element.value.length + 1) * 8) + 'px' 
    });