Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vanilla-autokana with all npm packages installed. Try it out:

var vanillaAutokana = require("vanilla-autokana")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vanilla-autokana v1.1.2

A JavaScript library to complete furigana automatically.

vanilla-autokana

English README is here

フォームのフィールドに文字を入力すると、別のフィールドにかなを自動入力するライブラリです。

特徴

  • jQueryに依存していません
  • scriptタグからの読み込みとESModulesのimportに対応しています

インストール方法

npm

npm i vanilla-autokana # or yarn add vanilla-autokana

npmを使わない方法

このリポジトリの dist/autokana.js をダウンロードし、scriptタグで読み込んでください。

使用方法

  • AutoKana.bind() メソッドの第1引数にふりがな入力元のinput要素、第2引数にふりがな出力先のinput要素のidを指定します
  • input要素が見つけられない場合は正常に動作できないため、DOMContentLoadedイベント内での実行を推奨します
  • ライブラリ本体はDOMのライフサイクルイベントに依存しないため、ライブラリの読み込みにはdefer属性の追加を推奨します
<input name="name" id="name">
<input name="furigana" id="furigana">
<script src="autokana.js" defer></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    AutoKana.bind("#name", "#furigana");
    // ↓ふりがなをカタカナで入力したい場合
    // AutoKana.bind("#name", "#furigana", { katakana: true });
  });
</script>

モジュールとしてimportする

ESModulesとしてimportすることができます。

import * as AutoKana from 'vanilla-autokana';

AutoKana.bind('#name', '#furigana');

Vue.jsと組み合わせる

v-modelを使用している場合、input要素のvalue属性への値のセットは動作しません。 Vue.jsでの使用例を参考に、名前フィールドのinputイベントで、AutoKana.getFurigana()メソッドでふりがなを取得し、Vueのリアクティブプロパティに反映させることをおすすめします。

React.jsと組み合わせる

React.jsでの使用例を参考にしてください。

ライセンス

MIT

謝辞

このライブラリの設計・実装は jquery-autokana(https://github.com/harisenbon/autokana) に大きく影響を受けています。

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free