JSでフリガナの入力を自動化する【jquery.autoKana.js】

動作イメージ

 

概要

jqueryのプラグインjquery.autokana.jsを利用して、自動入力をします。

自動入力は「ひらがな」「カタカナ」の両方に対応しています！

 

必要なもの

・jquery

・jquery.autoKana

 

jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CDNのリンクをhtml内に記述します。

 

jquery.autoKana

https://github.com/harisenbon/autokana
ここからDLし、htmlと同じフォルダに配置します

<script src="./jquery.autoKana.js"></script>

 

サンプルコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./jquery.autoKana.js"></script>

<script>
    $(function() {
        $.fn.autoKana('#name', '#kana', {katakana : true});
    });
</script>

<div>
    氏名：<input type="text" id="name" ><br>
    カナ：<input type="text" id="kana" >
</div>

 

autoKanaの仕様

katakanaはカタカナならtrue、ひらがなならfalse

 

注意点として

あくまでも、キーボード入力の日本語を反映させているため

などを利用した場合はフリガナが出ません。

最後に

いかがだったでしょうか？

今回はjqueryのフリガナの自動入力プラグインを紹介しました。