ふりがな自動入力で姓名を分けるには

質問

AutoKanaからautokana.jsを
prototypeからprototype.jsを
それぞれダウンロードし、ヘッダーに読み込ませ、ふりがな自動入力機能が備わったのですが、

姓と名をそれぞれ分けて自動入力させたいのですが、分けるといずれか片方が無効となってしまいます。
<p>苗字<br>
<input type="text" id="name" name="name" size="20"></p>

<p>名前<br>
<input type="text" id="name2" name="name2" size="20"></p>

<p>
<input type="text" id="ruby" name="ruby" size="20">
<input type="text" id="ruby2" name="ruby2" size="20"></p>

上記のように記述した場合、autokana.jsとprototype.jsはどのように変更すればよいでしょうか？
姓名分けることができればどのような方法でも構いません。
ご教示頂けると幸いです。
宜しくお願いいたします。

回答No.2

taco0603

あなたの文章からは姓名の分かち書きされた入力項目各々についてふりがな振りたいということしかわかりません。

AutoKana.jsでルビを振りたいのか、それともAutoRuby.jsでそうしたいのかはっきりさせてもらわないと…。
どっちなんですかね？

特に制約がないならAutoKana.jsを使えばいいとおもいますけど、何が不満なんですかね？

回答No.1

taco0603

↓みたいに単純に姓・名の要素名をそれぞれAutoKanaで2回呼び出せば動作すると思います。

<script type="text/javascript">
var auto_kana_1 = new AutoKana('name', 'ruby');
var auto_kana_2 = new AutoKana('name2', 'ruby2')
</script>

なぜ無効になるのかが分からない。

そもそも論としてはない機能を追加するのはまぁよしとして、この程度でライブラリを弄るのはどうも解せません。
ライブラリが改版された場合、そのままヴァージョンアップできなくなりますよ。

お礼

回答ありがとうございます。
new AutoKana('name', 'ruby');みたいな呼び出し方法ではないため困っています。
auto_ruby.jsもそのように呼び出すことができるのでしょうか？

var baseVal = "";
function setRuby(nameId,rubyId) {
var newVal = $(nameId).value;
if (baseVal == newVal){return;}
if (newVal == "") {
$(rubyId).value="";
baseVal = "";
return;
}

var addVal = newVal;
for(var i=baseVal.length; i>=0; i--) {
if (newVal.substr(0,i) == baseVal.substr(0,i)) {
addVal = newVal.substr(i);break;
}
}
baseVal = newVal;
var addruby = addVal.replace( /[^ 　ぁあ-んァー]/g, "" );
if (addruby == ""){return;}
if(convFlag){addruby = convKana(addruby);}
$(rubyId).value += addruby;
}

function loopTimer(){
setRuby($("name"),'ruby');
timer = setTimeout("loopTimer()",30);
}

function convKana(val){
var c, a = [];
for(var i=val.length-1;0<=i;i--){
c = val.charCodeAt(i);
a[i] = (0x3041 <= c && c <= 0x3096) ? c + 0x0060 : c;
}
return String.fromCharCode.apply(null, a);
}

var timer = false;
window.onload = function(){
loopTimer();
$(rubyField).onkeyup = setRuby(nameField,rubyField);
}