以前と大差ないけど。
前の記事
これを読むだけでも完結する。
ダウンロード
CDNは無いみたいなのでダウンロードして使う。
GitHub - harisenbon/autokana: Library for automatically rendering Furigana for inputted Japanese Text
Library for automatically rendering Furigana for inputted Japanese Text - harisenbon/autokana
github.com
ちょっと変えた
こうする。
<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});
})そんなかんじで。
コメント