web-dev-qa-db-ja.com

とにかく、ページの読み込み時にコンテンツに基づいてテキストエリアの「自動調整」の高さを設定することはできますか？

とにかくCSSまたはJavaScriptを介して、コンテンツに基づいてtextareaの高さを設定しますか？ CSSにハードコードされた高さがありますが、デフォルトにしたいので、ページの読み込み時に垂直スクロールバーはありませんか？

javascripthtmlcsstextarea
24
leora

どうですか http://www.jacklmoore.com/autosize/ 任意のWebページにAutosizeをドロップすれば、問題なく動作するはずです。あなたがそれがどのように機能するかに興味があるなら、ソースは短くてよくコメントされています。

// Example:
$(document).ready(function(){
    $('textarea').autosize();   
});

ソース： https://github.com/jackmoore/autosize

デモ： http://www.jacklmoore.com/autosize/

17
MK.

jQuery UI Autoresize を使用して、自動サイズ変更プラグインを使用できます。

ここにhtmlがあります、

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
 src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://css-tricks.com/examples/TextareaTricks/js/autoresize.jquery.min.js"></script>
<textarea></textarea>

ここにjqueryがあります、

$('textarea').autoResize();

参照 [〜＃〜] demo [〜＃〜]

8
mcn

プラグインがなければ、次のようなことができます

$(document).ready(function(){
  elem=document.getElementById('#elemid');
  while(elem.clientHeight < elem.scrollHeight) {elem.height(elem.height()+10)}
});

スクロールバーはあるがテキストエリアのサイズを変更する（elem.clientHeight <elem.scrollHeight）。 JQueryがなくても、プレーンなJavaScriptで簡単に実行できます。

コードをテストしませんでした。それは単なる「概念」です。

編集：私を馬鹿にします、それははるかに簡単です、ループなし...

if (elem.clientHeight < elem.scrollHeight) elem.style.height=elem.scrollHeight+"px";
7
miguel-svq

Chromeでテスト

純粋なJavaScriptソリューション（プラグインなし、jqueryなし）

動作中： fiddle

私は3つの関数を作成しました：

  • 行の高さを取得する
  • 行数を取得
  • 入力時にテキストエリアの高さを設定します（input event）
    //attach input event
    document.getElementById('ta').addEventListener('input', autoHeight, false);

    function autoHeight(e){
        var lh = getLineHeightInPixels(e.target);
        var nol = getNumberOfLines(e.target);
        var ht = lh * nol;
        e.target.style.height = ht + 'px';
    }

    function getNumberOfLines(el){
        var text = el.value
        var lines = text.split(/\r|\r\n|\n/);
        return lines.length;
    }

    function getLineHeightInPixels(el){

        var tempDiv = document.createElement('div');

        tempDiv.style.visibility = 'hidden';

        tempDiv.style.fontFamily = getComputedStyle(el).getPropertyValue('font-family');
        tempDiv.style.fontSize = getComputedStyle(el).getPropertyValue('font-size');
        tempDiv.style.lineHeight = getComputedStyle(el).getPropertyValue('line-height');
        tempDiv.style.fontVariant = getComputedStyle(el).getPropertyValue('font-variant');
        tempDiv.style.fontStyle = getComputedStyle(el).getPropertyValue('font-style');

        tempDiv.innerText = 'abcdefghijklmnopqrstuwxyz';

        document.documentElement.appendChild(tempDiv);

        var ht = parseInt(getComputedStyle(tempDiv).getPropertyValue('height'))

        document.documentElement.removeChild(tempDiv);
        return (ht);
    }

    //set height on document load
    document.addEventListener('DOMContentLoaded', function(){document.getElementById('ta').style.height = getLineHeightInPixels(document.getElementById('ta')) + 'px';}, false);
<textarea id="ta"></textarea>
3
Amro

素晴らしい解決策

JSFiddle

[〜＃〜] html [〜＃〜]

<div id="container">
    <textarea >
    1
    12
    123
    1234
    12345
    123456
    1234567
    </textarea>
</div>

[〜＃〜] css [〜＃〜]

div#container textarea {
    overflow-y: hidden; /* prevents scroll bar flash */
    padding-top: 1.1em; /* prevents text jump on Enter keypress */
}

JQuery

// auto adjust the height of
$('#container').on( 'keyup', 'textarea', function (e){
    $(this).css('height', 'auto' );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keyup();
2
Itay Gal

textareaで以下で使用する唯一のcssは、そのwidthです。初期heightを設定する必要はありません。使用されるoverflowは次のとおりであるため、scrollHeightも必要ありません。

オーバーフローのために画面に表示されないコンテンツを含む、要素のコンテンツの高さの測定値。

scrollHeight ：MDN

ただし、Internet Explorerを使用する場合は、overflow: autoを使用する必要があります。それ以外の場合はIEは、スクロールするものがない場合でも）垂直スクロールバーの追加を要求します。

widthも指定する必要はありませんが、このトピックに関連して最も一般的に設定されるのはプロパティです。

これは必要なJavaScriptです。

document.addEventListener("DOMContentLoaded", function(event) {
    var ta = document.getElementById('ta');
    ta.style.height = ta.scrollHeight + 'px';
});

DOMが読み込まれると、textareaのheightがscrollHeightに設定されます。

テスト用の完全なページは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<title>Some Title</title>
<style>
textarea {
    width: 300px;
    overflow: auto;
}
</style>
</head>
<body>
    <textarea id="ta">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var ta = document.getElementById('ta');
        ta.style.height = ta.scrollHeight + 'px';
    });
</script>
</body>
</html>

必要に応じて、コードをページ上のすべてのテキストエリアに適用できます。

document.addEventListener("DOMContentLoaded", function(event) {
    var tas = document.getElementsByTagName('textarea');
    for (var i=0; i < tas.length; i++) {
        tas[i].style.height = tas[i].scrollHeight + 'px';
    }
});
1
Andy G

これが純粋なJavaScriptソリューションです。 jquery、プラグインなどはありません。 [〜＃〜] demo [〜＃〜]

それで、それはどのように機能しますか？デフォルトのフォントサイズ/行の高さなどがあるとします。さて、あなたのtextareaは100px幅あたり約11文字を保持しています。これを覚えておけば、この関数を使うことができます。

function textareaSetSize(elem, width)
{
    var length = elem.value.length;
    //about 11 characters per 100 pixels
    var estimatedLines = Math.round(length/(width/100*11));
    //alert('Estimated number of lines: ' + length);
    elem.style.width  = width + 'px';
    elem.rows = estimatedLines;
}

それから.

    var selector = document.getElementsByClassName('textarea');
    for(var i = 0; i < selector.length; i++)
    {
        selector[i].onkeyup = function(){
            textareaSetSize(this, 400);
        };   
    }

html ...

<button id="reset">Empty</button>
<textarea class="textarea" id="autosize"></textarea>
<textarea class="textarea" id="autosize2"></textarea>
<textarea class="textarea" id="autosize3"></textarea>
<textarea class="textarea" id="autosize4"></textarea>

それを実行しています...

textareaSetSize(ta, 500);
textareaSetSize(ta2, 400);
textareaSetSize(ta3, 400);
textareaSetSize(ta4, 400);

これは完璧な解決策ではないので、革新を見つけたら私に知らせてください。

1
kemicofa ghost

Heyは、テキスト領域の背後に非表示のクローンpre要素が維持されるExpandingTextAreaプラグインを使用できます。このプレの高さが変わると、textareaが更新されます。

"expanding.js"と "jQuery"を含めるだけです。あなたのページで、uが展開する必要があるtextareaにクラス「expanding」を追加します。

<script src='expanding.js'></script>
<textarea class='expanding'></textarea>

詳細とデモについては、リンクをフォローしてください

注：既に追加されたテキストのドキュメントの読み込みで機能します

1
Mazzu

あなたがテキストエリア内のscollbarを気にしないなら、あなたは使うことができます

$(document).ready(function(){
    tx = $('#textarea')
    tx.height(tx.prop('scrollHeight'));

})

そしてここに フィドル

別の フィドル これには最小幅と最大幅が設定されています。

auto-size のようなプラグインで

テキストボックスの高さは、入力とともに増加します。

またはこれを試すことができます プラグイン

1
Sudheer

この仕事は私にとって

$(function(){
    $('body').on('keydown','textarea', function(event) {
        if ($('textarea')[0].clientHeight < $('textarea')[0].scrollHeight)
        {
            $('textarea').css({'height': $('textarea')[0].scrollHeight+"px"});
        }
        else
        {
            // reset height to default value
            $('textarea').css({'height': ''});
        }
    });
});
0
Mohamad Hamouday

この WhatsApp like inputに関する他の質問 は、この現在の質問の複製として誤ってマークされています。そこでは答えられないので、ここで答えます。

次の機能を備えたWhatsAppのような入力領域を作成しようとしました。

  1. コンテンツが4emを超えると、div/textareaは上に拡大するはずです
  2. Div/textareaの最大の高さは6emである必要があります
  3. メッセージ領域（div/textareaの上）を小さくする必要があります。つまり、スクロールバーの画鋲のサイズを変更する必要があります。

誰かがそれを探しているなら、これが私の純粋なCSSソリューションです（数分前のように）。

.arena {
  position: absolute;
  height: 20em;
  width: 12em;
  background-color: #efefef;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.messages {
  padding: 0.2em;
  height: 5em;
  flex: 1 1 0;
  overflow: auto;
}
.content {
  background-color: teal;  
  height: 20em;
}
.footer {
  position: relative;
  background-color: #cdcdcd;
  padding: 0.2em;
}
.editable {
  outline: none;
  max-height: 6em;
  min-height: 4em;
  overflow: auto;
  width: 80%;
  background-color: #fff;
}
<div class="arena">
  <div class="messages">
    <div class="content"></div>
  </div>
  <div class="footer">
    <div class="editable" contenteditable="true"></div>
  </div>
</div>
0
Kaya Toast

理由はわかりませんが、私の検索エンジンが別の解決策（「ハウツー」チュートリアル）を提供してくれたようです。

http://www.sitepoint.com/build-auto-expanding-textarea-3/

編集：

これがコードです。

/**
 * TextAreaExpander plugin for jQuery
 * v1.0
 * Expands or contracts a textarea height depending on the
 * quatity of content entered by the user in the box.
 *
 * By Craig Buckler, Optimalworks.net
 *
 * As featured on SitePoint.com:
 * http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/
 *
 * Please use as you wish at your own risk.
 */

/**
 * Usage:
 *
 * From JavaScript, use:
 *     $(<node>).TextAreaExpander(<minHeight>, <maxHeight>);
 *     where:
 *       <node> is the DOM node selector, e.g. "textarea"
 *       <minHeight> is the minimum textarea height in pixels (optional)
 *       <maxHeight> is the maximum textarea height in pixels (optional)
 *
 * Alternatively, in you HTML:
 *     Assign a class of "expand" to any <textarea> tag.
 *     e.g. <textarea name="textarea1" rows="3" cols="40" class="expand"></textarea>
 *
 *     Or assign a class of "expandMIN-MAX" to set the <textarea> minimum and maximum height.
 *     e.g. <textarea name="textarea1" rows="3" cols="40" class="expand50-200"></textarea>
 *     The textarea will use an appropriate height between 50 and 200 pixels.
 */

(function($) {

    // jQuery plugin definition
    $.fn.TextAreaExpander = function(minHeight, maxHeight) {

        var hCheck = !($.browser.msie || $.browser.opera);

        // resize a textarea
        function ResizeTextarea(e) {

            // event or initialize element?
            e = e.target || e;

            // find content length and box width
            var vlen = e.value.length, ewidth = e.offsetWidth;
            if (vlen != e.valLength || ewidth != e.boxWidth) {

                if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0px";
                var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax));

                e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden");
                e.style.height = h + "px";

                e.valLength = vlen;
                e.boxWidth = ewidth;
            }

            return true;
        };

        // initialize
        this.each(function() {

            // is a textarea?
            if (this.nodeName.toLowerCase() != "textarea") return;

            // set height restrictions
            var p = this.className.match(/expand(\d+)\-*(\d+)*/i);
            this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);
            this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);

            // initial resize
            ResizeTextarea(this);

            // zero vertical padding and add events
            if (!this.Initialized) {
                this.Initialized = true;
                $(this).css("padding-top", 0).css("padding-bottom", 0);
                $(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea);
            }
        });

        return this;
    };

})(jQuery);


// initialize all expanding textareas
jQuery(document).ready(function() {
    jQuery("textarea[class*=expand]").TextAreaExpander();
});

私の仕事ではないので、コードにコメントを残しました;）

0
jBear Graphics

ページの読み込み時に0を返すため、scrollHeightを使用できませんでした（おそらく、読み込み時にテキスト領域が非表示になっているためです）。おそらくネストの練習ではありませんが（私はjsの新人です）、機能した唯一のオプションは、textareaの行数を数えて、その長い行の長さを取得することでした。次に、widthとheightを適宜設定します。

var elements = document.getElementsByTagName("textarea")
for (var i = 0; i < elements.length; i++) {
    var atagelement = elements[i];
    console.log(atagelement.value);

    var textareasplit =atagelement.value.split(/\r|\r\n|\n/);
    var textareaheight =  textareasplit.length *17  // change 17 according to your needs

    var maxline=0
    for  (var j = 0; j < textareasplit.length; j++){
    var line = textareasplit[j];
    var linelenght= line.length;
        if (maxline < linelenght){
            maxline= linelenght;
        };
    };
    var textareawidth= maxline*10  // change 10 according to your needs
    atagelement.setAttribute('style', "width:" + textareawidth+"px ; height:"+textareaheight+"px");

}

必要に応じて、max-width（またはmax-height） このような

    var maxwidth= window.innerWidth *0.8
    console.log(maxwidth)
    atagelement.setAttribute('style', "width:" + textareawidth+"px ; height:"+textareaheight+"px ; max-width:" + maxwidth+ "px");
0
MagTun