[jQuery]フォームに名前入れたらフリガナが勝手に埋まるアレ2023

以前と大差ないけど。

前の記事

これを読むだけでも完結する。

ダウンロード

CDNは無いみたいなのでダウンロードして使う。

GitHub - harisenbon/autokana: Library for automatically rendering Furigana for inputted Japanese Text
Library for automatically rendering Furigana for inputted Japanese Text - GitHub - harisenbon/autokana: Library for auto...

ちょっと変えた

こうする。

<head>
︙
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="js/jquery.autoKana.js"></script>
<script>
$(function(){
    $.fn.autoKana('input[name="name01"] ', 'input[name="name_kana01"]', {katakana:true});
    $.fn.autoKana('input[name="name02"] ', 'input[name="name_kana02"]', {katakana:true});
})
</script>
</head>
<body>
︙
<input type="text" name="name01">
<input type="text" name="name01_kana">

<input type="text" name="name02">
<input type="text" name="name02_kana">
︙
</body>

inputにidを振るよりもname指定のがいい。nameはフォーム内でユニークだし、フォームは基本的にページ内に1つだし、id使いすぎは好きじゃない。

ひらがなで出力

第三引数を削るとひらがなで出る。

$(function(){
    //ひらがな
    $.fn.autoKana('input[name="name01"] ', 'input[name="name_kana01"]');
    //カタカナ
    $.fn.autoKana('input[name="name01"] ', 'input[name="name_kana01"]', {katakana:true});
})

そんなかんじで。

コメント

タイトルとURLをコピーしました