event式autoKana.jsの紹介

すでに若干乗り遅れてる感じもしますが、読み仮名の自動入力がはやっているようなので乗っかってみます。

サンプル (IE7,FF2,safari3.1で動作確認)

お気づきの方もいるかもしれませんが、これまでの記事()はこのライブラリを作る過程で発見したことのまとめです。

で、このライブラリも結局は読み仮名の自動入力なんですが、今までのautoKana.jsと違ってsetInterval(or setTimeout)を使用していません。

ではどのようにして読みを取得しているかというと、IE,safariではkeyup、FFではtextイベントを使用してキー入力を取得し、その時点のひらがなから読みを認識しています。

この方法だとtimerをまわす必要がないのでブラウザの負担も軽く、高速でキーを入力されても取りこぼしもなく、イベント駆動なのでコードが短くなる等の利点があります。

ただ、operaでは上記のどの方法でもイベントが取得できないので、もしoperaもサポートする必要があれば、operaのみtimer式で実装するしかないかもしれません。


(function($) {
    var name_space = 'autokana';
    $.fn[name_space] = function(options) {

        var elements = this;
        var settings = $.extend({
            'suffix' : '_kana',
            'target' : false
        }, options);

        var check_value = function () {
            var val = $(this).val();
            var rmf = $.data(this, name_space);
            var hit = [];
            $.each(val.split('').reverse(), function () {
                var c = this.charCodeAt();
                //hiragana?
                if (c < 0x3041 || c > 0x3096) return false;
                hit.push(this);
            });
            if (!hit.length) return;
            rmf.old = hit.reverse().join('');
        };

        var set_value = function () {
            var rmf = $.data(this, name_space);
            if (!rmf.old) return;
            var target = settings.suffix
                ? $('[name="'+this.name+settings.suffix+'"]')
                : $(settings.target)
            ;
            var kana = $(target);
            kana.val(kana.val() + rmf.old);
            rmf.old = '';
        };

        elements.each(function() {
            var key_func = function (env) {
                check_value.call(this);
                if (env.keyCode != 13) return;
                set_value.call(this);
            };
            ( function (v) {
                return ([$.data(v.get(0), name_space, {}), v])[1];
            } )( $(this) )
                .keyup(key_func)
                .keydown(key_func)
                .keypress(check_value)
                .bind('text', check_value)
            ;

        });
        return this;
    };
})(jQuery);