OOなJavaScriptの勉強がてら、ボタンの2度押し禁止機能を簡単に実現するライブラリを作ってみました

ちょっと時代に乗り遅れている気もしますが、最近prototype.jsをつかったOOなJavaScriptを書くのにはまっています。

今日はbindとbindAsEbentListenerの勉強がてら、これまたかなり昔話題になった「2度押し禁止ボタン」を実現するコードを書いてみました。

input.js

使い方はこんな感じです。

　// prototype.jsとinput.jsをロードします。
　<script type="text/javascript" src="/path/to/prototype.js"></script>
　<script type="text/javascript" src="/path/to/input.js"></script>
　<script type="text/javascript"><!--
　// windoのロード時に2度押し禁止機能を有効にします。
　Event.observe(window, 'load', function(){
　    // ボタンのIDか要素のオブジェクトを渡せばクリックすると押せなくなります。
　    new Input.DisableAfterClick('myButton');
　}, false);
　 --></script>

ボタンのテキストを変えたい場合は2番目の引数に代替テキストを渡します。

画像の場合は代替画像のURLを渡します。

    new Input.DisableAfterClick('mySubmitButton2', '送信中です');
    new Input.DisableAfterClick('myImageButton2', '/path/to/image2.gif');

一定時間経過後にボタンを再度有効にしたい場合は、3番目の引数に有効にするまでの時間をミリ秒単位で渡します。

    new Input.DisableAfterClick('myButton', '1秒後にまた有効になります', 1000);

サンプルページにサンプルがあります。

また、input.jsの中身はこんな感じです。画像ボタンの扱いはもっといい方法があるのかなーとも思うんですが、おかしなところがあったら突っ込んでください。

var Input = new Object();
Input.DisableAfterClick = Class.create();
Input.DisableAfterClick.prototype = {
    initialize : function(input, alt, timer){
        this.input = $(input);
        this.alt   = alt;
        this.timer = timer;
        this.org   = this.input.type == 'image'
                   ? this.input.src
                   : this.input.value;
        this.stopEvent = this._stopEvent.bindAsEventListener(this);
        Event.observe(this.input, 'click', this.disable.bind(this));
    },
    disable : function() {
        this.input.blur();
        if (this.input.type == 'image'){
            if ( this.alt )
                this.input.src = this.alt;
            Event.observe(this.input, 'click', this.stopEvent);
        } else {
            if ( this.alt )
                this.input.value = this.alt;
            this.input.disabled = true;
        }
        if (this.timer)
            setTimeout(this.enable.bind(this), this.timer);
    },
    enable : function() {
        if (this.input.type == 'image'){
            if ( this.alt )
                this.input.src = this.org;
            Event.stopObserving(this.input, 'click', this.stopEvent);
        } else {
            if ( this.alt )
                this.input.value = this.org;
            this.input.disabled = '';
        }
    },
    _stopEvent : function (evt) {
        evt.stop();
        return false;
    }
};

Technorati TAG javascript, prototype,

Posted by horiuchi at 2006年05月21日 02:37