Library for automatically rendering Furigana for inputted Japanese Text
Latest commit 8846075 Oct 17, 2016 @harisenbon committed on GitHub Merge pull request #6 from pifantastic/package.json
Adding a package.json
Failed to load latest commit information. Modify a text of README. Aug 3, 2016
jquery.autoKana.js Switch to indexOf Oct 14, 2016
package.json Adding a package.json Oct 17, 2016


Library for automatically rendering Furigana for inputed Japanese Text.



  • Jquery


Attaches a keydown listener to the first defined element, and transfers the inputted kana characters to the second element. This allows Japanese users to automatically input the furigana for their name without needing to input data twice. Because the furigana box is filled out in real time, corrections can be made by the user afterwards.

Based on Rubricks' autoRuby.js prototype project:




  • Pass the NAME element and the FURIGANA input elements to the Plugin
  • $.fn.autoKana('#UserName', '#UserFurigana');
  • Optionally, pass the katakana:true option to automatically convert the furigana to full-width katakana
  • $.fn.autoKana('#UserName', '#UserFurigana', {katakana:true});

  • 名前とフリガナのフィールドエレメントをプラグインに定義:

  • $.fn.autoKana('#UserName', '#UserFurigana');
  • katakana:trueのオプションを定義した場合、フリガナがカタカナに変換されます。
  • $.fn.autoKana('#UserName', '#UserFurigana', {katakana:true});


  • Kana will be removed from the furigana field if deleted from the original input field, but kanji that are deleted from the input field will not be reflected in the furigana field
  • For obvious reasons, getting the Furigana of copy/pasted text is not supported
  • English characters are not currently supported

  • 入力欄から文字を削除した場合、カナはフリガナのフィールドからも削除されますが、入力された文字が漢字だった場合は、文字を削除しても、この通りに反映されない

  • keydownを利用しているので、コピペされたテキストは非対応
  • ローマ字は非対応

Example Site

Made for Kurokabe Square's online reservation system: