jQueryでふりがなを自動入力するプラグインはこちらの「jquery.autoKana.js」が有名かと思いますが、Macのライブ変換でうまく動作しませんでした。
https://github.com/harisenbon/autokana

そこで、Macのライブ変換がONの場合でも動作する、ふりがな自動変換を作ってみました。

作ったもの

Macのライブ変換で勝手に入力文字が漢字に変換される場合でも、ふりがなを出力します。

デモサイト

ここで動作確認ができるはずです。
Github Pages を使ってみました。
https://int314.github.io/autoKana/

コード

使い方

dist/jquery.autoKana.min.jsを読み込んで、第1引数に入力元、第2引数に出力先の要素を指定します。

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="./dist/jquery.autoKana.min.js"></script>
  <script>
    $(document).ready(function () {
      $('#nameInput').autoKana('#nameInput', '#hiraganaOutput');
      $('#nameInput').autoKana('#nameInput', '#katakanaOutput', { katakana: true });
    });
  </script>

やったこと

ローマ字とひらがな（カタカナ）の辞書を作成して、keyupイベントの時に変換してます。
押されたキーを覚えておいて、辞書とマッチしたら出力するので、ライブ変換でもなんとか変換できるようになりました。

return katakana ? katakanaMap[input] || '' : hiraganaMap[input] || '';

ローマ字とひらがなの辞書

const hiraganaMap = {
  'a': 'あ', 'i': 'い', 'u': 'う', 'e': 'え', 'o': 'お',
  'ka': 'か', 'ki': 'き', 'ku': 'く', 'ke': 'け', 'ko': 'こ',
  'sa': 'さ', 'si': 'し', 'su': 'す', 'se': 'せ', 'so': 'そ',
  'ta': 'た', 'ti': 'ち', 'tu': 'つ', 'te': 'て', 'to': 'と',
  'na': 'な', 'ni': 'に', 'nu': 'ぬ', 'ne': 'ね', 'no': 'の',
  ...

ローマ字とカタカナの辞書

const katakanaMap = {
  'a': 'ア', 'i': 'イ', 'u': 'ウ', 'e': 'エ', 'o': 'オ',
  'ka': 'カ', 'ki': 'キ', 'ku': 'ク', 'ke': 'ケ', 'ko': 'コ',
  'sa': 'サ', 'si': 'シ', 'su': 'ス', 'se': 'セ', 'so': 'ソ',
  'ta': 'タ', 'ti': 'チ', 'tu': 'ツ', 'te': 'テ', 'to': 'ト',
  'na': 'ナ', 'ni': 'ニ', 'nu': 'ヌ', 'ne': 'ネ', 'no': 'ノ',
  ...

一生懸命キーボードを打ち込み、辞書を作成しました...😅

Viteを入れてみた⚡️

メインのjsとひらがな・カタカナ辞書を別のファイルにして整理したかったので、複数のjsをまとめるバンドラーを導入しました。
バンドラーはWebpackの記事が多くヒットしましたが、最近名前をよく聞くしカッコ良さそうなViteにしました。

ついでにMinifyもしてjsファイルを圧縮してます。

Viteの設定ファイルを以下のようにして、

vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: 'src/jquery.autoKana.js',
      output: {
        entryFileNames: 'jquery.autoKana.min.js',
      }
    },
    outDir: 'dist',
    emptyOutDir: true,
    minify: true
  }
});

npm run buildするとdistフォルダの配下に

jquery.autoKana.js
hiraganaMap.js
katakanaMap.js

をまとめたjquery.autoKana.min.jsが出力されるようになります。

最終的にこんな感じのフォルダ構成になりました。

.
├── dist
│   └── jquery.autoKana.min.js
├── index.html
├── src
│   ├── hiraganaMap.js
│   ├── jquery.autoKana.js
│   └── katakanaMap.js
└── vite.config.js