フォームのテキストエリアをより使いやすくするテクニック集

CSSやJavaScript(jQuery)を使用して、フォームのテキストエリアをより使いやすくする9つのトリックを紹介します。

サイトのキャプチャ

Textarea Tricks
デモページ

1. テキストエリアの背景に画像を表示

テキストエリアの背景に画像を表示し、入力時には非表示にします。

サイトのキャプチャ

CSS

画像の表示には、スタイルシートを利用します。

JavaScript

入力時の非表示には、スクリプトでフォーカス時に非表示になるようにします。

2. HTML5を使ったプレースホルダー

HTML5を使用して、テキストエリアのフォーカス時に非表示になるテキストを配置します。対応ブラウザはSafari5, Chrome6, Firefox4alphaです。

サイトのキャプチャ

HTML

3. jQueryを使ったプレースホルダー

HTML5対応ブラウザにはHTML5で、非対応ブラウザはjQueryを使用して、テキストエリアのフォーカス時に非表示になるテキストを配置します。

JavaScript

指定したエレメントが特定の属性をサポートしているか調査するスクリプトの例です。

JavaScript

ブラウザが「placeholder」に対応しているかチェックし、非対応の場合はスクリプトで実行します。

4. テキストエリアからハイライトを消す

テキストエリアのフォーカス時にブラウザの標準機能で表示されるハイライト処理を取り除きます。

サイトのキャプチャ

CSS

Webkit系ブラウザでは下記のスタイルシートで取り除くことができます。Firefox, Operaでは「-moz-outline-style」で取り除くことはできませんでした。

5. テキストエリアのサイズ変更を取り除く

Webkit系ブラウザで表示されるテキストエリアのサイズ変更をするUIエレメントを取り除きます。

サイトのキャプチャ

CSS

もし理由があって取り除く場合は、下記のように指定します。

6. テキストエリアのサイズ変更を配置

Webkit系だけでなく他のブラウザでも、同様にテキストエリアのサイズ変更を配置したい場合はjQueryで簡単に設置できます。

サイトのキャプチャ

JavaScript

下記の短いスクリプトでテキストエリアにサイズ変更のUIエレメントを配置できます。

7. テキストエリアのサイズを自動変更

ユーザーの入力した量に合わせて、テキストエリアのサイズを変更するスクリプトです。

サイトのキャプチャ

JavaScript

jQueryのプラグイン「autoResize」を使用すると、簡単に実装することができます。

8. テキストエリアの自動改行を禁止

テキストエリアに入力したテキストの自動改行を禁止します。

サイトのキャプチャ

HTML

テキストエリア内の自動改行はスタイルシートの「white-space: nowrap;」では指定が有効にならないため、HTMLで指定します。

9. IEで表示されるテキストエリアのスクロールバーを消す

IEで入力量がスペースより少ない場合でもスクロールバーが表示されるので、これを取り除きます。

サイトのキャプチャ

CSS

IEで表示されるスクロールバーを取り除きます。入力量がスペースより多い場合はスクロールバーは表示されます。

sponsors

top of page

©2018 coliss