textareaサイズ変更

Question

webアプリケーションの開発を行っています。

<textarea>~~</textarea>

textareaタグを用いて長文を表示する際に
普段は複数行あろうと一行で表示させておき(文字列には特には操作はせずに、一行という認識でお願いします)、
見たいときにテキストエリアをクリックして
testareaをリサイズして全文表示させるコードを組みたいのですが、
わかりません。
全文が表示されている状態でまたクリックすると一行表示に戻るようにしたいです。

ご教授ください。。

Comments

[Lhankor_Mhy]

補足願います。「普段は複数行あろうと一行で表示させておき」とありますが、その状態のときには改行を削除するということでしょうか？　それとも最初の一行だけを表示するということですか？

[mahoken]

追記しました！

Answer 1

こんな形でどうでしょうか。

var target = document.querySelector('textarea');
target.addEventListener('focus',function(){
  this.style.height = this.scrollHeight + 'px';
});
target.addEventListener('blur',function(){
  this.style.height = 'auto';
});

https://jsfiddle.net/b9scn1fh/

Comments

[mahoken]

提示頂いたコードを少し手を加えたらできました！！！！ありがとうございます！！！！！助かりました