今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. 水平・垂直スクロースのシングルページを実装「fullPage.js」
  3. 時間入力を補助する「timepicker」
  4. バーチャルキーボードを実装「Keyboard」
  5. select要素の複数選択フォームを実装「Multiple Select」

文字数に応じてテキストエリア高さを自動調節「autoexpand」

スポンサーリンク

文字数に応じてテキストエリア高さを自動調節するプラグイン「autoexpand」を紹介します。

jQueryプラグイン「autoexpand」

HTML のフォーム部品 textareaタグの中にテキストを書き込みんでいると……ちょっと多く書いただけではみ出す場合がよくあります。フォームのサイズはWeb制作者の悩みのひとつかもしれませんね。

そんな場合は今回紹介するプラグイン「autoexpand」を使いましょう。テキストを書き込めば自動的にフォームが拡がってくれるという便利機能が簡単に手に入ります。

スポンサーリンク

それではデモのテキストエリアを編集してみてください。

「autoexpand」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="autoexpandのデモでーす。">
<title>autoexpand - jQueryプラグイン</title>
<style>
section {
  width: 400px;
}
textarea {
  width: 100%;
}
</style>
</head>
<body>
<section>
<h1>autoexpand のデモでーす。</h1>
<p>普通(auto-expand 適用なし)</h2>
<textarea>
ああああああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいいいいい
うううううううううううううううううううううううううううう
ええええええええええええええええええええええええええええ
おおおおおおおおおおおおおおおおおおおおおおおおおおおお
</textarea>
</section>

<section>
<p>auto-expand を適用</p>
<textarea id="autoexpand">
ああああああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいいいいい
うううううううううううううううううううううううううううう
ええええええええええええええええええええええええええええ
おおおおおおおおおおおおおおおおおおおおおおおおおおおお
</textarea>
</section>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script src='jquery.autoexpand.js'></script>
<script>
$(function(){
  $('textarea#autoexpand').autoExpand();
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)