web-dev-qa-db-ja.com

テキストエリアオートハイト

Textareaの高さをその中のテキストの高さと同じにしたい（そしてスクロールバーを削除する）

HTML

<textarea id="note">SOME TEXT</textarea>

CSS

textarea#note {
    width:100%;
    direction:rtl;
    display:block;
    max-width:100%;
    line-height:1.5;
    padding:15px 15px 30px;
    border-radius:3px;
    border:1px solid #F7E98D;
    font:13px Tahoma, cursive;
    transition:box-shadow 0.5s ease;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    font-smoothing:subpixel-antialiased;
    background:linear-gradient(#F9EFAF, #F7E98D);
    background:-o-linear-gradient(#F9EFAF, #F7E98D);
    background:-ms-linear-gradient(#F9EFAF, #F7E98D);
    background:-moz-linear-gradient(#F9EFAF, #F7E98D);
    background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
}

JsFiddle： http://jsfiddle.net/Tw9Rj/

javascripthtmlcss
126
Mohammad Mahdi Naderi

それはJSを使って達成することができます。これは elastic.js を使った '1行の' 解決策 です。

$('#note').elastic();

Updated：elastic.jsはもうないようですが、外部ライブラリを探しているなら、Jack Mooreによる autosize.js をお勧めします。これは実用的な例です。

autosize(document.getElementById("note"));
textarea#note {
        width:100%;
        box-sizing:border-box;
        direction:rtl;
        display:block;
        max-width:100%;
        line-height:1.5;
        padding:15px 15px 30px;
        border-radius:3px;
        border:1px solid #F7E98D;
        font:13px Tahoma, cursive;
        transition:box-shadow 0.5s ease;
        box-shadow:0 4px 6px rgba(0,0,0,0.1);
        font-smoothing:subpixel-antialiased;
        background:linear-gradient(#F9EFAF, #F7E98D);
        background:-o-linear-gradient(#F9EFAF, #F7E98D);
        background:-ms-linear-gradient(#F9EFAF, #F7E98D);
        background:-moz-linear-gradient(#F9EFAF, #F7E98D);
        background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
}
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<textarea id="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>

この同様のトピックもチェックしてください。

プロトタイプを使ったテキストエリアの自動サイズ調整

コンテンツの長さに基づいてサイズを変更するテキストエリア

自動サイズ変更によるテキストエリアの作成

34
Mike

これは純粋なJavaScriptコードを使用しています。

function auto_grow(element) {
    element.style.height = "5px";
    element.style.height = (element.scrollHeight)+"px";
}
textarea {
    resize: none;
    overflow: hidden;
    min-height: 50px;
    max-height: 100px;
}
<textarea onkeyup="auto_grow(this)"></textarea>
260
Moussawi7

Angularを使ってこれを達成する私たちのために、私はディレクティブを使いました

HTML：

<textarea elastic ng-model="someProperty"></textarea>

JS：

.directive('elastic', [
    '$timeout',
    function($timeout) {
        return {
            restrict: 'A',
            link: function($scope, element) {
                $scope.initialHeight = $scope.initialHeight || element[0].style.height;
                var resize = function() {
                    element[0].style.height = $scope.initialHeight;
                    element[0].style.height = "" + element[0].scrollHeight + "px";
                };
                element.on("input change", resize);
                $timeout(resize, 0);
            }
        };
    }
]);

$timeoutはDOMがロードされた後に発生するイベントをキューに入れます。これは正しいscrollHeightを取得するために必要なものです（そうでなければundefinedを取得します）。

113
blockloop

私は jQuery AutoSize を使用しました。私がElasticを使ってみたとき、それは私に偽の身長（本当に背の高いtextareaのもの）を私に与えました。 jQuery AutoSizeはうまく機能し、この問題はありませんでした。

14
Peter

私はこれがすでに答えられているのを見ます、しかし私は私が簡単なjQueryソリューションを持っていると思います（jQueryは本当に必要でさえない。私はただそれを使うのを楽しんでいます）：

textareaテキストの改行を数え、それに応じてrowsのtextarea属性を設定することをお勧めします。

var text = jQuery('#your_textarea').val(),
    // look for any "\n" occurences
    matches = text.match(/\n/g),
    breaks = matches ? matches.length : 2;

jQuery('#your_textarea').attr('rows',breaks + 2);
8
Douglas.Sesar

Jsfiddle

textarea#note {
    width:100%;
    direction:rtl;
    display:block;
    max-width:100%;
    line-height:1.5;
    padding:15px 15px 30px;
    border-radius:3px;
    border:1px solid #F7E98D;
    font:13px Tahoma, cursive;
    transition:box-shadow 0.5s ease;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    font-smoothing:subpixel-antialiased;
    background:-o-linear-gradient(#F9EFAF, #F7E98D);
    background:-ms-linear-gradient(#F9EFAF, #F7E98D);
    background:-moz-linear-gradient(#F9EFAF, #F7E98D);
    background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
    background:linear-gradient(#F9EFAF, #F7E98D);
    height:100%;
}
html{
    height:100%;
}
body{

   height:100%;    
}

またはjavascript

var s_height = document.getElementById('note').scrollHeight;
document.getElementById('note').setAttribute('style','height:'+s_height+'px');

Jsfiddle

5
Pumpkinpro
var minRows = 5;
var maxRows = 26;
function ResizeTextarea(id) {
    var t = document.getElementById(id);
    if (t.scrollTop == 0)   t.scrollTop=1;
    while (t.scrollTop == 0) {
        if (t.rows > minRows)
                t.rows--; else
            break;
        t.scrollTop = 1;
        if (t.rows < maxRows)
                t.style.overflowY = "hidden";
        if (t.scrollTop > 0) {
            t.rows++;
            break;
        }
    }
    while(t.scrollTop > 0) {
        if (t.rows < maxRows) {
            t.rows++;
            if (t.scrollTop == 0) t.scrollTop=1;
        } else {
            t.style.overflowY = "auto";
            break;
        }
    }
}
2
user3530437

html

<textarea id="wmd-input" name="md-content"></textarea>

js

var textarea = $('#wmd-input'),
    top = textarea.scrollTop(),
    height = textarea.height();
    if(top > 0){
       textarea.css("height",top + height)
    }

css

#wmd-input{
    width: 100%;
    overflow: hidden;
    padding: 10px;
}
0
emitle