【Web】文字数に応じて自動的にリサイズするTEXTAREA

※Web関連のプログラム等を作成の備忘録的なものになります。
今回はTEXTAREAの自動リサイズです。
ページのデザイン等が崩れる場合もあるため、使う機会も少ないですが、文章を入力している際に入力欄が小さく、スクロールになってしてしまって書き辛く感じる場合もあるかと思います。
そのような場合に入力した文章が全て見えるようにすることができます。


下記のサイトでjQueryを利用したコードを公開してくれています。
http://www.jacklmoore.com/autosize/
ありがとうございます。
使い方は簡単で上記サイトからコードをダウンロードします。
ダウンロードしたファイルとjQueryを読み込みます
<script src=”jquery.min.js” type=”text/javascript”></script>
<script src=”jquery.autosize.js” type=”text/javascript”></script>
全てのテキストエリアを対象とする場合は
<script type=”text/javascript”>
$(function(){
$(‘textarea’).autosize();
});
</script>
個別のテキストエリアを対象とする場合は(IDで指定しています:<textarea class=’textid’></textarea>など)
<script type=”text/javascript”>
$(function(){
$(‘#textid’).autosize();
});
</script>
CSSと組み合わせて動きを付ける場合は(IDで指定しています:<textarea class=’textid’ class=’animated’></textarea>など)
<style type=”text/css”>
.animated {
-webkit-transition: height 0.2s;
-moz-transition: height 0.2s;
transition: height 0.2s;
}
</style>
<script type=”text/javascript”>
$(function(){
$(‘#textid’).autosize({append: “\n”});
});
</script>

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Optionally add an image (JPEG only)