すでに若干乗り遅れてる感じもしますが、読み仮名の自動入力がはやっているようなので乗っかってみます。
サンプル (IE7,FF2,safari3.1で動作確認)
お気づきの方もいるかもしれませんが、これまでの記事(1,2,3)はこのライブラリを作る過程で発見したことのまとめです。
で、このライブラリも結局は読み仮名の自動入力なんですが、今までの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);