# vanilla-autokana [English README is here](https://github.com/ryo-utsunomiya/vanilla-autokana/blob/master/README_en.md) フォームのフィールドに文字を入力すると、別のフィールドにかなを自動入力するライブラリです。 ## 特徴 - 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`属性の追加を推奨します ``` ``` ### モジュールとしてimportする ESModulesとしてimportすることができます。 ``` import * as AutoKana from 'vanilla-autokana'; AutoKana.bind('#name', '#furigana'); ``` ### Vue.jsと組み合わせる `v-model`を使用している場合、input要素のvalue属性への値のセットは動作しません。 ↓のように、 `getFurigana` メソッドを使ってふりがなを取り出し、リアクティブプロパティにセットしてください。 ``` ``` ### React.jsと組み合わせる Vue.jsと同様の対応が必要です。 ``` import React, { Component } from 'react'; import * as AutoKana from 'vanilla-autokana'; let autokana; class App extends Component { constructor() { super(); this.state = { name: '', furigana: '', }; this.handleNameInput = this.handleNameInput.bind(this); } componentDidMount() { autokana = AutoKana.bind('#name', '#furigana'); } handleNameInput(ev) { this.setState({ name: ev.target.value, furigana: autokana.getFurigana(), }); } render() { return (

名前

ふりがな

入力内容の確認

名前: { this.state.name }

ふりがな: { this.state.furigana }

); } } export default App; ``` ## ライセンス MIT ## 謝辞このライブラリの設計・実装は jquery-autokana(https://github.com/harisenbon/autokana) に大きく影響を受けています。

vanilla-autokana

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past