jquery - 高さ自動調整 - textarea 高さ 自動




jQuery-自動サイズのテキスト入力(テキストエリアではない!) (6)

編集: .html()代わりに.text()メソッドを使用して、すべての書式設定を取得します。)

こんにちは私はあなたがまだ見ているのかわかりませんが、私は同じことをするためのスクリプトを探していたときに私はこれを見つけました。 ですから、これをやろうとしている人、あるいはそれに類する人に役立つことを願っています。

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をやっているだけではないかもしれません。

ありがとう

ジョージ

この質問には既に回答があります:

入力タイプ= "text"フィールドをjQueryで自動サイズ変更するにはどうすればよいですか? 私はそれが最初に100pxのようなものになりたいと思って、それからユーザーがテキストを入力すると自動的に拡大するようにしてください...それは可能ですか?


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

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

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

私はちょうどtextareasとそれをテストし、それは動作します! テキストエリアの自動拡張、[type = text]の入力と[type = password]の入力をサポートします。

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

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


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

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


私はseizeの答えを使用しましたが、これらの変更を行いました:

  • isValidWidthChange// Animate width isValidWidthChange // Animate width設定の間:

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

    この方法では、内容が大きすぎて最大幅に収まらない場合に入力を大きくすることができます。

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

    // Auto-size when page first loads
    check();
    

私はGitHubのjQueryプラグインを持っている: https://github.com/MartinF/jQuery.Autosize.Input : https://github.com/MartinF/jQuery.Autosize.Input

それはseizeの答えと同じアプローチを使用しますが、コメントに言及された変更のいくつかを持っています。

http://jsfiddle.net/mJMpw/6/例をここで見ることができます: http://jsfiddle.net/mJMpw/6/ : 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;    
}

あなたはちょうど良い効果を望む場合は、最小/最大幅を設定し、幅にトランジションを使用するためにCSSを使用します。

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

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

$("selector").autosizeInput();




input