web-dev-qa-db-ja.com

jQuery-テキストサイズの自動入力（textareaではありません！）

JQueryで入力type = "text"フィールドのサイズを自動変更するにはどうすればよいですか？最初は幅を100ピクセルにしたいのですが、ユーザーがテキストを入力すると自動的に幅が広がるようにします...それは可能ですか？

jqueryhtmlinput
40
migajek

これが目的の処理を実行するプラグインです。

プラグイン：

(function($){

$.fn.autoGrowInput = function(o) {

    o = $.extend({
        maxWidth: 1000,
        minWidth: 0,
        comfortZone: 70
    }, o);

    this.filter('input:text').each(function(){

        var minWidth = o.minWidth || $(this).width(),
            val = '',
            input = $(this),
            testSubject = $('<tester/>').css({
                position: 'absolute',
                top: -9999,
                left: -9999,
                width: 'auto',
                fontSize: input.css('fontSize'),
                fontFamily: input.css('fontFamily'),
                fontWeight: input.css('fontWeight'),
                letterSpacing: input.css('letterSpacing'),
                whiteSpace: 'nowrap'
            }),
            check = function() {

                if (val === (val = input.val())) {return;}

                // Enter new content into testSubject
                var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                testSubject.html(escaped);

                // Calculate new width + whether to change
                var testerWidth = testSubject.width(),
                    newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                    currentWidth = input.width(),
                    isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                         || (newWidth > minWidth && newWidth < o.maxWidth);

                // Animate width
                if (isValidWidthChange) {
                    input.width(newWidth);
                }

            };

        testSubject.insertAfter(input);

        $(this).bind('keyup keydown blur update', check);

    });

    return this;

};

})(jQuery);

EDIT：見つかりました： テキストフィールド用のjQuery autogrowプラグインはありますか？

64
seize

入力要素に入力されたテキストの実際の幅を検出できないため、その問題に対する完璧な解決策はないと思います。それはすべて、使用しているフォント、ブラウザのズーム設定などに依存します。

ただし、テキストのピクセル数を実際に計算できるフォントを選択できる場合（これが最も難しい部分ですが、どういうわけか推定できると思います）。これを使用して、入力フィールドの幅を変更できます。

 $('input').keyup(function () {
     // I'm assuming that 1 letter will expand the input by 10 pixels
     var oneLetterWidth = 10;

     // I'm also assuming that input will resize when at least five characters
     // are typed
     var minCharacters = 5;
     var len = $(this).val().length;
     if (len > minCharacters) {
         // increase width
         $(this).width(len * oneLetterWidth);
     } else {
         // restore minimal width;
         $(this).width(50);
     }
 });
10
RaYell

（編集済み：.text()の代わりに.html()メソッドを使用して、すべての書式設定を正しく行います。）

こんにちは、まだ探しているかどうかはわかりませんが、同じことをするスクリプトを探していたときにこれに遭遇しました。したがって、これがこれをやろうとしている人、または同様の人に役立つことを願っています。

function editing_key_press(e){
    if(!e.which)editing_restore(this.parentNode);
    var text = $('<span>')
        .text($(this).val())
        .appendTo(this.parentNode);
    var w = text.innerWidth();
    text.remove();
    $(this).width(w+10);
}

このコードのロジックは、コンテンツをスパン内のページに配置し、このコンテンツの幅を取得して削除することです。私が持っていた問題は、それが正常に機能するためにキーダウンとキーアップの両方で実行する必要があるということでした。

これがお役に立てば幸いです。私はほんの少しの間jqueryをやっているだけではないかもしれません。

ありがとう

ジョージ

8
thor222

GitHubにjQueryプラグインがあります： https://github.com/MartinF/jQuery.Autosize.Input

それは、捕捉の答えと同じアプローチを使用しますが、コメントで言及されたいくつかの変更があります。

ライブの例をここで見ることができます： http://jsfiddle.net/mJMpw/6/

例：

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />

input[type="data-autosize-input"] {
  width: 90px;
  min-width: 90px;
  max-width: 300px;
  transition: width 0.25s;    
}

Nice効果が必要な場合は、cssを使用してmin/max-widthを設定し、幅の遷移を使用します。

Input要素のdata-autosize-input属性のjson表記の値として、最後までのスペース/距離を指定できます。

もちろん、jQueryを使用して初期化することもできます

$("selector").autosizeInput();
6
MartinF

seize's answer を使用しましたが、これらの変更を行いました。

  • isValidWidthChangeと_// Animate width_の設定間：

    _if (!isValidWidthChange && newWidth > minWidth && newWidth > o.maxWidth) {
    newWidth = o.maxWidth;
    isValidWidthChange = true;
}
_

    この方法では、コンテンツが大きすぎて最大幅に収まらない場合、入力が許可された大きさになります。

  • $(this).bind('keyup keydown blur update', check);の後：

    _// Auto-size when page first loads
check();
_
2
Sarah Vessels

このjQueryプラグインを参照してください。 https://github.com/padolsey/jQuery.fn.autoResize

テキストエリアでテストしてみたところ、うまくいきました！ textareas、input [type = text]およびinput [type = password]の自動拡張をサポートします。

UPD。元の作者がgithubからリポジトリを削除したようです。プラグインは長い間更新されておらず、非常にバグが多いことが判明しました。より良い解決策を見つけることをお勧めします。しばらく前にこのプラグインにプルリクエストを行ったので、githubアカウントに コピー があります。それを改善したい場合にのみ使用してください。防弾ではありません！

また、ExtJSフレームワークにはテキストフィールドの自動サイズ設定が実装されていることがわかりました。growconfigプロパティを参照してください。この小さなロジックをフレームワークから切り出すことはそれほど簡単ではありませんが、アプローチに関するいくつかの良いアイデアを与えることができます。

1
Dmitry Pashkevich

このコードを試してください：

var newTextLength = Math.floor($("input#text).val() * .80);
$("input#text").attr("size",newTextLength);
0
user3470283

私はちょうど同じことを考えていました。 Textboxは、ユーザーがテキストボックスにテキストを書き込んでいるときに、それ自体のサイズを変更する必要があります。私はそれを使ったことはありませんが、それをどうやってやるかは考えています。このようなもの：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>

  <table border="1">
  <tr>
    <td>
      <span id="mySpan">
        <span id="mySpan2"></span>
        <input id="myText" type="text" style="width:100%" onkeyup="var span = document.getElementById('mySpan2');var txt = document.getElementById('myText'); span.innerHTML=txt.value;">
       </span>
    </td>
    <td>
            sss
    </td>
  </tr>
</table>

  </body>
</html>
0
Racky

デフォルトでは、入力幅は size パラメーターによって制御されます。このパラメーターは、type="text"の場合の幅の文字数に対応します。

これはピクセルではなく文字で測定されるため、実際のピクセルサイズは使用中の（固定幅）フォントによって制御されます。

0
Powerlord