サイズ変更可能なテキスト範囲は特定のサイズまでです

Question

IE11で実行するAngular4/Bootstrap3にテキストエリアフィールドを作成しています。

テキスト領域は、いくつかのテキスト

<textarea [value]="mydata" class="form-control" rows="5"></textarea> 

これは1がそれが期待するように動作しますが事前に入力されます。 5行が表示され、テキストが5行に収まるものを超えると、スクロールバーが表示されます。テキストが空白より小さい場合、テキスト領域にスペースが表示されます。

私が達成しようとしているのは、デフォルトの動作とは少し異なります。テキストエリアのサイズを変更することができますが、サイズは特定の行数を超えてはいけません。最大サイズは5行に設定されています。 したがって、表示するテキストを1行に収めることができれば、テキスト領域は1行だけを表示します。 4行に収めることができれば、4行に拡張されます。 10行に収まる場合は、最大5行まで展開され、残りのテキストのスクロールバーが表示されます。

このような種類の動作は可能ですか？私は例として行を使用しましたが、高さのプロパティなどで実現できる場合は、それも問題ありません。

Answer 1

あなたは少しCSSでこれを達成することができ、かつmax-heightプロパティを使用して：

textarea { 
    overflow-y:scroll 
    max-height:100px; /* change to a height you see fit */ 
} 

をデフォルトの高さを設定しないことにより、テキスト領域が少ないあなたmax-heightより任意のコンテンツのために十分に高くなり、ときそれはそれを打つ、それはスクロールを開始します。

また、textareaからrows属性を削除してください。