jquery - ページの読み込み時にテキストボックスのサイズをコンテンツに自動設定

Question

大量のテキスト ボックスを含むフォームがあり、各テキスト ボックスのサイズを手動で設定するのではなく、ページの読み込み時にテキスト ボックスの内容に合わせてサイズを設定できることを望んでいました。

ここで良い自動拡張スクリプトを見つけました 。テキスト フィールド用の jQuery 自動拡張プラグインはありますか?

しかし、テキストボックスに1文字しかない場合、デフォルトを小さくする方法がわかりません

ありがとう

Answer 1

はい、あなたはそれを行うことができます

$("input").each(function(){
    var myLength = $(this).val().length;
    if(myLength == 1){
        $(this).attr('size', myLength);
        $(this).attr('class', 'mini');
    }else{
        $(this).attr('size', myLength);    
    }

});

そしてcssクラス：

.mini{
    width:10px;
}

fiddleの例。

それが役に立てば幸い！

Answer 2

次のことを試してみてください。いくつかの文字制限が入力フィールドをテキストエリアに置き換えた後、次のコードを参照してください。

$(".input_text").each(function(index, obj){
    var txt = $(this), txtLength = txt.val().length;
    if(txtLength <= 1){
        txt.height("25px");
    }else{
        var txtarea = $("<textarea/>");
        txt.replaceWith(txtarea.val(txt.val()));
    }
});

ここでの実例: http://jsfiddle.net/tFDNx/2/

Answer 3

それらのどれでも使用できます。これはすべて正常に機能します

1)<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

2)var inputEl = document.getElementById("theInput");

  function getWidthOfInput() {
    var tmp = document.createElement("span");
    tmp.className = "input-element tmp-element";
    tmp.innerHTML = inputEl.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    document.body.appendChild(tmp);
    var theWidth = tmp.scrollWidth;
    document.body.removeChild(tmp);
    return theWidth;
  }

  function adjustWidthOfInput() {
    inputEl.style.width = getWidthOfInput() + "px";
  }

  adjustWidthOfInput();
  inputEl.onkeyup = adjustWidthOfInput;

3) // HTML // jQuery

$(function(){
  $('#input').keyup(function(){
    $('<span id="width">').append( $(this).val() ).appendTo('body');
    $(this).width( $('#width').width() + 2 );
    $('#width').remove();
  });
});