はじめに
こんばんは。
今回は vanilla-autokanaを使ってみました。
日本語入力すると、対応するカタカナが該当のフォームに入力される的なやつです。
今回は vueを使用しているプロジェクトで導入しました。
参考サイト
本題
コードはざっくりこんな感じ。
<script lang="ts" setup> import { useForm } from "@inertiajs/vue3"; import * as AutoKana from "vanilla-autokana"; import { onMounted, ref } from "vue"; const form = useForm({ nameMei: '', nameSei: '', nameSeiKana: '', nameMeiKana: '', }); const autoKanaSei = ref(); const autoKanaMei = ref(); onMounted(() => { autoKanaSei.value = AutoKana.bind("#nameSei", "#nameSeiKana", { katakana: true }); autoKanaMei.value = AutoKana.bind("#nameMei", "#nameMeiKana", { katakana: true }); }); </script> <template> <main> <div> <label>姓</label> <input id="nameSei" v-model="form.nameSei" type="text" @input="form.nameSeiKana = autoKanaSei?.getFurigana()" /> </div> <div> <label>名</label> <input id="nameMei" v-model="form.nameMei" type="text" @input="form.nameMeiKana = autoKanaMei?.getFurigana()" /> </div> <div> <label>姓(カナ)</label> <input id="nameSeiKana" v-model="form.nameSeiKana" type="text" /> </div> <div> <label>名(カナ)</label> <input id="nameMeiKana" v-model="form.nameMeiKana" type="text" /> </div> </main> </template>
漢字側のinputの クリックイベントで変換されたカタカナ文字をカタカナ側のv-modalへセットしているformデータに保存するだけです。
終わりに
簡単ですが、以上です。
もうすぐ12月ですね。
はやいはやい。