Add Furigana

HTML

<script src="https://rawgithub.com/icoxfog417/KanaMaker/master/KanaMaker.js"></script>
<label>Name</label><input id="txtName" type="text" class="txt" />
<hr/>

<label>Kana</label>
<input id="txtKana" type="text" class="txt" />
<br/>
<label>Hira</label>
<input id="txtHira" type="text" class="txt" />
<br/>
<label>Roma</label>
<input id="txtRoma" type="text" class="txt" />

<br/>
<label>Kana Separated</label>
<input id="txtKanaLast" type="text" class="txt-part" />
<input id="txtKanaFirst" type="text" class="txt-part" />
<br/>
<label>Hira Separated</label>
<input id="txtHiraLast" type="text" class="txt-part" />
<input id="txtHiraFirst" type="text" class="txt-part" />
<br/>
<label>Roma Separated</label>
<input id="txtRomaLast" type="text" class="txt-part" />
<input id="txtRomaFirst" type="text" class="txt-part" />
<br/>

CSS

label{
    display:block;
    width:180px;
    float:left;
    font-weight:bold;
    margin-top:3px;
}
.txt{
    float:left;
    width:256px;
}
.txt-part{
    float:left;
    width:123px;
    margin-right:10px;
}
br,hr{
    clear:both;
}

JavaScript

$(function(){    
    var convertor = null;
    $("#txtName").click(function(e){
        convertor = new KanaMaker();
    })
    
    $("#txtName").keyup(function(e){
        if(convertor != null){
            convertor.eval(e);
            $("#txtKana").val(convertor.Kana());
            $("#txtHira").val(convertor.Hira());
            $("#txtRoma").val(convertor.Roma());
            
            $("#txtKanaLast").val(convertor.Kana(true));
            $("#txtHiraLast").val(convertor.Hira(true));
            $("#txtRomaLast").val(convertor.Roma(true));
            $("#txtKanaFirst").val(convertor.Kana(false));
            $("#txtHiraFirst").val(convertor.Hira(false));
            $("#txtRomaFirst").val(convertor.Roma(false));
            
        }else if($("#txtName").val() == ""){
            convertor = new KanaMaker(); //reset
        }
    })
})