JavaScriptでテキストフィールドを装飾しよう

JavaScript

2007.06.28

引き続きJavaScriptにハマって(熱中&苦しんで)いる田中です．JavaScriptを使うと，シンプルなテキストフィールドにもインテリジェントな機能(っていうほどたいしたことないですが)を持たせることが出来ます．今回はPrototype.jsを利用して、テキストフィールドに説明を表示するクラスを作りました。

TextFieldExplain.html

<html>
    <head>
    <title>JavaScriptでTextFieldに説明を付ける</title>
    <script type="text/javascript" language="JavaScript"
src="./js/prototype.js"></script>
    <script type="text/javascript" language="JavaScript"
src="./js/TextFieldExplain.js"></script>
    <script type="text/javascript" language="JavaScript">
<!--
var pretty_TF = null;
function onLoadPage() {
    pretty_TF = new TextFieldExplain($('prettyTF'), "入力してください");
}
//-->
    </script>
    </head>
    <body onLoad="onLoadPage()">
        <form>
            <input type="text" id="prettyTF" />
        </form>
    </body>
</html>

処理の流れは

ページ読み込み終了時にonLoadPage関数を読み込みます．
テキストフィールドの説明を管理するクラスにテキストフィールドを登録します．(pretty_TF = new TextFieldExplain(...) )
コンストラクタの中で、テキストフィールドの状態を調べて、空白なら説明を代入します
テキストフィールドにフォーカスすると，説明が表示されていたときは消します．

またテキストフィールドにすでに値がセットされていたときは，機能しないようになっています．

TextFieldExplain.js

テキストフィールドの説明の状態を管理するクラスです。コンストラクタでは、値の有無を判断して、説明の挿入とスタイル変更を行っています。clearExplainメソッドは説明を除去します。コンストラクタでこのメソッドをイベントリスナーに登録しています。

var TextFieldExplain = Class.create();

TextFieldExplain.prototype = {
    // コンストラクタ
    initialize: function(target, explain) {
        this.target = target;//対象となるテキストフィールド
        this.explain = explain;//説明
        this.userInputAlready = null;//ユーザの入力状態

        if (this.target.value == "") {
            this.target.style.color = "#888888";
            this.target.value = this.explain;
            this.userInputAlready = false;
            Event.observe(this.target, 'focus', this.clearExplain.bindAsEventListener(this), false);
        } else {
            this.userInputAlready = true;
        }
    },
    //説明の除去
    clearExplain: function() {
        if (this.userInputAlready == false) {
            this.target.value = "";
            this.target.style.color = "#000000";
            this.userInputAlready = true;
        }
    }
};

prototype.jsのオブジェクト指向的な機能を利用することで，PHPやPythonの様な言語と似たような構造のクラスを書くことが出来ます．(正直，prototype.jsを使わないクラスの書き方をまだ知らないのですが…)

この実装で自分が良いと考えている点は

利用する側(HTML)で，気にしなければならない事が少ない
使い回せる
JavaScriptが無効の時は無かったことに出来る(いつも利用させていただいているエキサイト翻訳はJavaScriptを無効にすると，説明文を自分で削除したうえで文章を入力しなければならないようになっていて，ユーザー側からすると面倒くさそうです．(2007/06/27日現在))
関数で実装するより，処理やプロパティがまとまっている