web-dev-qa-db-ja.com

コンテンツに基づいてテキスト領域を自動的にサイズ変更

自分のページの1つに、ユーザーが文字を書き込むためのテキスト領域のhtmlタグがあります。テキスト領域の下のコンテンツを下にシフトしたい、つまり、テキスト領域を垂直方向に各行を追加してサイズ変更したいテキスト領域に配置し、下のコンテンツを単にテキスト領域の下部に対して配置します。

私が望んでいるのは、javascript/jqueryが、単語が折り返すとき、または新しい行が追加され、それに基づいてテキスト領域コンテナーのサイズ変更を行うときを検出する方法があることです。

私の目標は、ユーザーが書いた量に関係なく、テキスト領域の下のコンテンツをテキストの下部から同じ距離に保つことです。

テキスト領域は、テキストがオーバーフローしたときにスクロールバーを作成します。

javascriptjquerycsstextarea
11
Ryan Mortensen

http://www.jacklmoore.com/autosize/

最初にプラグインをダウンロードします。

ステップ1：jqueryプラグインを保持する場所に「jquery.autoresize.min.js」を配置します。

ステップ2：ファイルをHTMLでリンクする-> _<script src="jquery.autosize.min.js" type="text/javascript" ></script>_このリンクがjqueryリンクの後、独自のjavascript/jqueryコードリンクの前に来るようにしてください。

ステップ3：JavaScriptコードファイルに$('#containerToBeResized').autosize();を追加するだけです

8
Ryan Mortensen

私がWebで見つけたいくつかの解決策にあまり満足していなかったので、これを私の見解とします。

Min-height、max-heightを尊重します。高さにバッファーを追加することにより、スクロールバーのジャンプやフラッシュを回避します（現在、20は行の高さに置き換えられる場合があります）。ただし、max-heightに達してもスクロールバーは表示されます。 textareaの高さを0に設定する代わりに段階的に減らすことで、コンテナーのスクロール位置のリセットを回避します。これにより、削除されたすべての行も同時に削除されます。 IEおよびChrome=で動作し、ブラウザを盗聴する必要はありません。

http://jsfiddle.net/Nd6B3/4/

<textarea id="ta"></textarea>

#ta {
    width:250px;
    min-height:116px;
    max-height:300px;
    resize:none;
}

$("#ta").keyup(function (e) {
    autoheight(this);
});

function autoheight(a) {
    if (!$(a).prop('scrollTop')) {
        do {
            var b = $(a).prop('scrollHeight');
            var h = $(a).height();
            $(a).height(h - 5);
        }
        while (b && (b != $(a).prop('scrollHeight')));
    };
    $(a).height($(a).prop('scrollHeight') + 20);
}

autoheight($("#ta"));
14
Thaylon
$('textarea').keyup(function (e) {
    var rows = $(this).val().split("\n");
    $(this).prop('rows', rows.length);
});

this 作業サンプル。

3
Berat Bilgin

this Fiddle from this answer を参照してください。これにより、行数に基づいてテキストエリアの高さが増加します。

それがあなたが求めていることだと思います。

以下の答えからコードをコピーしました：

[〜＃〜] html [〜＃〜]

<p>Code explanation: <a href="http://www.impressivewebs.com/textarea-auto-resize/">Textarea Auto Resize</a></p>

<textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"></textarea>

[〜＃〜] js [〜＃〜]

/*global document:false, $:false */
var txt = $('#comments'),
    hiddenDiv = $(document.createElement('div')),
    content = null;

txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common');

$('body').append(hiddenDiv);

txt.on('keyup', function () {

    content = $(this).val();

    content = content.replace(/\n/g, '<br>');
    hiddenDiv.html(content + '<br class="lbr">');

    $(this).css('height', hiddenDiv.height());

});

[〜＃〜] css [〜＃〜]

body {
     margin: 20px;
}

p {
    margin-bottom: 14px;
}

textarea {
    color: #444;
    padding: 5px;
}

.txtstuff {
    resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
    overflow: hidden;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    Word-wrap: break-Word;
    overflow-wrap: break-Word; /* future version of deprecated 'Word-wrap' */
}

/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
}

.lbr {
    line-height: 3px;
}
1
Adam C