テキストエリアを自動的に拡張する

Question

単純な自動拡張テキスト領域を作成しようとしています。これは私のコードです:

リーリー

しかし、テキスト領域は入力すると無限に拡大します...

このための Dojo プラグインや jQuery プラグインがあることは知っていますが、それらを使用したくありません。私はその実装を見て、最初は scrollHeight を使用していましたが、同じことをしました。

回答を開始し、テキスト領域を使用して回答を再生できます。

Answer 1

自動拡張領域を行数 (例: 5 行) で制限したいと考えています。 Rob の解決策 として、「em」単位を使用することを検討しましたが、これは エラーが発生しやすい であり、パディングなどは考慮されていません。

これは私のアイデアです:

リーリー

フィドル:http://jsfiddle.net/cgSj3/< /p>

Answer 2

scrollHeight を使用して、テキスト領域を正しく拡大/縮小する前に高さをリセットします。 Math.min() テキスト領域の高さ制限を設定するために使用できます。

コード:

リーリー

フィドル: http://jsfiddle.net/gjqWy/155

注: input イベントは、IE8 以前では サポートされていません。この古いブラウザもサポートしたい場合は、keydown または keyup と onpaste および/または oncut を使用してください。 < /p>