フォームのテキストエリアをより使いやすくするテクニック集
Post on:2010年7月20日
sponsors
CSSやJavaScript（jQuery）を使用して、フォームのテキストエリアをより使いやすくする9つのトリックを紹介します。
1. テキストエリアの背景に画像を表示
テキストエリアの背景に画像を表示し、入力時には非表示にします。
CSS
画像の表示には、スタイルシートを利用します。
|
1 2 3 4 5 6 |
<textarea name="code" class="css" cols="60" rows="5"> textarea { background: url(images/benice.png) center center no-repeat; /* This ruins default border */ border: 1px solid #888; } </textarea> |
JavaScript
入力時の非表示には、スクリプトでフォーカス時に非表示になるようにします。
|
1 2 3 4 5 |
<textarea name="code" class="js" cols="60" rows="5"> $('textarea') .focus(function() { $(this).css("background", "none") }) .blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } }); </textarea> |
2. HTML5を使ったプレースホルダー
HTML5を使用して、テキストエリアのフォーカス時に非表示になるテキストを配置します。対応ブラウザはSafari5, Chrome6, Firefox4alphaです。
HTML
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea> </textarea> |
3. ｊQueryを使ったプレースホルダー
HTML5対応ブラウザにはHTML5で、非対応ブラウザはjQueryを使用して、テキストエリアのフォーカス時に非表示になるテキストを配置します。
JavaScript
指定したエレメントが特定の属性をサポートしているか調査するスクリプトの例です。
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="js" cols="60" rows="5"> function elementSupportsAttribute(element, attribute) { var test = document.createElement(element); if (attribute in test) { return true; } else { return false; } }; </textarea> |
JavaScript
ブラウザが「placeholder」に対応しているかチェックし、非対応の場合はスクリプトで実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<textarea name="code" class="js" cols="60" rows="5"> if (!elementSupportsAttribute('textarea', 'placeholder')) { // Fallback for browsers that don't support HTML5 placeholder attribute $("#example-three") .data("originalText", $("#example-three").text()) .css("color", "#999") .focus(function() { var $el = $(this); if (this.value == $el.data("originalText")) { this.value = ""; } }) .blur(function() { if (this.value == "") { this.value = $(this).data("originalText"); } }); } else { // Browser does support HTML5 placeholder attribute, so use it. $("#example-three") .attr("placeholder", $("#example-three").text()) .text(""); } </textarea> |
4. テキストエリアからハイライトを消す
テキストエリアのフォーカス時にブラウザの標準機能で表示されるハイライト処理を取り除きます。
CSS
Webkit系ブラウザでは下記のスタイルシートで取り除くことができます。Firefox, Operaでは「-moz-outline-style」で取り除くことはできませんでした。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> textarea { outline: none; } </textarea> |
5. テキストエリアのサイズ変更を取り除く
Webkit系ブラウザで表示されるテキストエリアのサイズ変更をするUIエレメントを取り除きます。
CSS
もし理由があって取り除く場合は、下記のように指定します。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> textarea { resize: none; } </textarea> |
6. テキストエリアのサイズ変更を配置
Webkit系だけでなく他のブラウザでも、同様にテキストエリアのサイズ変更を配置したい場合はjQueryで簡単に設置できます。
JavaScript
下記の短いスクリプトでテキストエリアにサイズ変更のUIエレメントを配置できます。
|
1 2 3 |
<textarea name="code" class="js" cols="60" rows="5"> $("textarea").resizable(); </textarea> |
7. テキストエリアのサイズを自動変更
ユーザーの入力した量に合わせて、テキストエリアのサイズを変更するスクリプトです。
JavaScript
jQueryのプラグイン「autoResize」を使用すると、簡単に実装することができます。
|
1 2 3 |
<textarea name="code" class="js" cols="60" rows="5"> $('textarea').autoResize(); </textarea> |
8. テキストエリアの自動改行を禁止
テキストエリアに入力したテキストの自動改行を禁止します。
HTML
テキストエリア内の自動改行はスタイルシートの「white-space: nowrap;」では指定が有効にならないため、HTMLで指定します。
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <textarea wrap="off" cols="30" rows="5"></textarea> </textarea> |
9. IEで表示されるテキストエリアのスクロールバーを消す
IEで入力量がスペースより少ない場合でもスクロールバーが表示されるので、これを取り除きます。
CSS
IEで表示されるスクロールバーを取り除きます。入力量がスペースより多い場合はスクロールバーは表示されます。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> textarea { overflow: auto; } </textarea> |
sponsors
