01_front_template.html

<div style='font-family: BIZ UDGothic; font-size: 48px;'>{{edit:Front}}</div>
<br>
<div style='font-family: BIZ UDGothic; font-size:24px;'>{{edit:Sentence}}</div>

<br>
<hr>
<br>

reading
<div id=reading>
    {{type:Reading}}
</div>

<script>
    (function () {
        // [ascii, hiragana, insert ttsu?]
        const replacements = [
            ["ka", "か", true],
            ["ki", "き", true],
            ["ku", "く", true],
            ["ke", "け", true],
            ["ko", "こ", true],

            ["ga", "が", true],
            ["gi", "ぎ", true],
            ["gu", "ぐ", true],
            ["ge", "げ", true],
            ["go", "ご", true],

            ["sa", "さ", true],
            ["shi", "し", true],
            ["su", "す", true],
            ["se", "せ", true],
            ["so", "そ", true],

            ["za", "ざ", true],
            ["ji", "じ", true],
            ["zu", "ず", true],
            ["ze", "ぜ", true],
            ["zo", "ぞ", true],

            ["ta", "た", true],
            ["chi", "ち", true],
            ["tsu", "つ", true],
            ["te", "て", true],
            ["to", "と", true],

            ["da", "だ", true],
            ["di", "ぢ", true],
            ["du", "づ", true],
            ["de", "で", true],
            ["do", "ど", true],

            ["na", "な", true],
            ["ni", "に", true],
            ["nu", "ぬ", true],
            ["ne", "ね", true],
            ["no", "の", true],

            ["ha", "は", true],
            ["hi", "ひ", true],
            ["fu", "ふ", true],
            ["he", "へ", true],
            ["ho", "ほ", true],

            ["ba", "ば", true],
            ["bi", "び", true],
            ["bu", "ぶ", true],
            ["be", "べ", true],
            ["bo", "ぼ", true],

            ["pa", "ぱ", true],
            ["pi", "ぴ", true],
            ["pu", "ぷ", true],
            ["pe", "ぺ", true],
            ["po", "ぽ", true],

            ["ma", "ま", true],
            ["mi", "み", true],
            ["mu", "む", true],
            ["me", "め", true],
            ["mo", "も", true],

            ["ra", "ら", true],
            ["ri", "り", true],
            ["ru", "る", true],
            ["re", "れ", true],
            ["ro", "ろ", true],

            ["ya", "や", false],
            ["yu", "ゆ", false],
            ["yo", "よ", false],

            ["wa", "わ", false],
            ["wo", "を", false],

            ["a", "あ", false],
            ["i", "い", false],
            ["u", "う", false],
            ["e", "え", false],
            ["o", "お", false],
            // note the trailing whitespace
            ["n ", "ん", false],
            ["nn", "ん", false],

            ["nya", "にゃ", true],
            ["nyu", "にゅ", true],
            ["nyo", "にょ", true],

            ["gya", "ぎゃ", true],
            ["gyu", "ぎゅ", true],
            ["gyo", "ぎょ", true],

            ["pya", "ぴゃ", true],
            ["pyu", "ぴゅ", true],
            ["pyo", "ぴょ", true],

            ["cha", "ちゃ", true],
            ["chu", "ちゅ", true],
            ["cho", "ちょ", true],

            ["rya", "りゃ", true],
            ["ryu", "りゅ", true],
            ["ryo", "りょ", true],

            ["bya", "びゃ", true],
            ["byu", "びゅ", true],
            ["byo", "びょ", true],

            ["sha", "しゃ", true],
            ["shu", "しゅ", true],
            ["sho", "しょ", true],

            ["mya", "みゃ", true],
            ["myu", "みゅ", true],
            ["myo", "みょ", true],

            ["kya", "きゃ", true],
            ["kyu", "きゅ", true],
            ["kyo", "きょ", true],

            ["hya", "ひゃ", true],
            ["hyu", "ひゅ", true],
            ["hyo", "ひょ", true],

            ["ja", "じゃ", true],
            ["ju", "じゅ", true],
            ["jo", "じょ", true],
        ];

        // do longest replacements first
        replacements.sort((a, b) => {
            return b[0].length - a[0].length;
        });

        function replaceSuffix(haystack, from, to, checkTtsu) {
            if (checkTtsu) {
                // e.g. ka -> kka
                const ttsuFrom = from[0] + from;

                // if ends with kka, then replace with っか
                if (haystack.endsWith(ttsuFrom)) {
                    return haystack.substr(0, haystack.length - ttsuFrom.length) + "っ" + to;
                }
            }

            if (haystack.endsWith(from)) {
                return haystack.substr(0, haystack.length - from.length) + to;
            }
            return haystack;
        }

        function onReadingChanged(event) {
            const elem = event.target;
            let value = elem.value;

            replacements.forEach(([from, to, checkTtsu]) => {
                value = replaceSuffix(value, from, to, checkTtsu);
            });

            // check if there's an 'n' in the penultimate position - if so, rewrite it to ん
            if (value.length >= 2) {
                if (value[value.length - 2] == 'n') {
                    value = value.substr(0, value.length - 2) + 'ん' + value.substr(value.length - 1, value.length);
                }
            }

            if (event.key === "Enter") {
                value = replaceSuffix(value, "n", "ん", false);
            }
            elem.value = value;

            const reading = document.getElementById("typeans");
            reading.value = value;

            if (event.key === "Enter") {
                window.bridgeCommand("ans");
            }
        }

        var mutating = false;
        function main() {
            if (mutating) { return; }
            mutating = true;

            const reading = document.getElementById("typeans");
            if (!reading) {
                console.log("didn't find reading input");
                return;
            }
            document.r = reading;

            let richreading = document.querySelector("#richreading");
            if (!richreading) {
                richreading = document.createElement("input");
                richreading.id = "richreading";
                richreading.type = "text";
                richreading.placeholder = "ひらがな";
                reading.parentNode.appendChild(richreading);
            }

            document.rr = richreading;

            richreading.focus();
            richreading.addEventListener('keyup', onReadingChanged);
            richreading.addEventListener('keydown', onReadingChanged);
        }

        $(document).bind("DOMSubtreeModified", main);
    })();
</script>

02_back_template.html

{{type:Reading}}

<br>

<div style='font-family: BIZ UDGothic; font-size: 48px;'>{{edit:w/ Furigana}}</div>

<br>
<div style='font-family: BIZ UDGothic; font-size: 24px;'>{{edit:Kanji}}</div>


{{Audio}}

03_styling.css

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: #ffffff;
 background-color: #2d2d2d;
}

#richreading {
	width: 100%;
	box-sizing: border-box;
	font-size: 1.5em;
}

#reading #typeans {
	display: none;
}

Anki_Hiragana_IME.mp4

Here's a demo

And here's the field configuration for the card:

Found an issue where trying to type 'nyu' results in ’んゆ' not 'にゅ'. Not really sure how to fix it, but otherwise this is super helpful. Thank you!!

I doubt you read this, but just in case; for some reason, I get two textboxes instead of one. Is it something to do with the fact that I cut down on the fields involved?