勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

テキストエリアを自動でリサイズ

   2014/07/03  jQuery JavaScript

改行するだけで勝手にリサイズしてくれるので、
ユーザー用でも管理用でも使えそう。

■textareas.js
http://bgrins.github.io/ExpandingTextareas/

■使い方
jqueryとtextareasを呼び出す。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src='expanding.js'></script>

■サンプル
http://sample.taitan916.info/textareas/

■ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transtional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html"/>
<meta cherset = "UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src='expanding.js'></script>
<html lang="ja">
<head>
<title>textareasのテスト</title>
</head>
<body>
<h1>textareasのテスト</h1>
■普通のテキストエリア<br />
<textarea></textarea><br />

■textareas.jsが効いてるテキストエリア<br />
<textarea class='expanding'></textarea><br />
</body>
</html>

 - jQuery JavaScript

  関連記事

Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...

PHPとajaxでチャットの作成

■ソース ・index.php <? error_reporting(E_ ...

jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法

jQueryで指定した要素のposition(leftやtop) / width ...

jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...

tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)

テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...