Html input like on desktop

[Lolle2000la]

Is your feature request related to a problem? Please describe. I am using the input feature to learn readings of kanji, for which I have heavily modified the element inserted by anki using CSS and JS (like adding Wanakana.js and more). On Ankidroid, that element is not shown, instead an input is added to the bottom, which does not work with the modifications.

Describe the solution you'd like I would like the option to use the same input element as on Anki desktop for certain card types.

Describe alternatives you've considered Hacking together my own typing mechanism.

Additional context Add any other context or screenshots about the feature request here.

[welcome[bot]]

Hello! 👋 Thanks for logging this issue. Please remember we are all volunteers here, so some patience may be required before we can get to the issue. Also remember that the fastest way to get resolution on an issue is to propose a change directly, https://github.com/ankidroid/Anki-Android/wiki/Contributing

[SanjaySargam]

Will you please share front card and back card details

[Lolle2000la]

Of course! It's a bit messy but does the job. It converts romaji into hiragana while typing and has certain shortcut-mappings used in the field.

Front:

{{#onyomi}}
<span class="expression">{{kanji}}</span>

<br>
<br>
<p class="onyomi-label">音読み</p>

{{type:onyomi}}

<script>
 document.getElementById("typeans").style.fontSize = "1.6em";
 document.getElementById("typeans").style.imeMode =  "active";
 document.getElementById("typeans").style.fontFamily =  "arial";
</script>

<script>
    var injectScript = (src) => {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;
            script.async = true;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    };

    var mainFunc = async () => {
        // Load jquery only on AnkiDroid
        if (typeof wanakana === "undefined") {
            await injectScript("_wanakana.min.js");
        }

        var input = document.getElementById("typeans");
        wanakana.bind(input, {
            IMEMode: 'toKatakana',
            customKanaMapping: {
                '.': '.',
                'ä': '［外］',
                'ü': '［中］',
                'ö': '［高］',
                "'": '［外］',
                '[': '［中］',
                ';': '［高］',
                '(':'(',
                ')': ')'
            }
        });

        // Do something after jquery is loaded.

    };

    mainFunc();
</script>
{{/onyomi}}

Back:

{{FrontSide}}

<hr id=answer>
<br>
<span style="font-size: 50px;">{{onyomi}}</span>

<script>
document.getElementById("typeans").style.fontSize = "1.6em";
</script>

<hr style="margin-top: 5em;">
<p style="text-align:left;">
&nbsp;&nbsp;&nbsp;&nbsp;
<span class="big"><b>部首</b> {{radical}}</span>
<span style="float:right;"><span class="big"><b>漢検の級</b> {{level}}</span> 
&nbsp;&nbsp;&nbsp;&nbsp;
</span></p>

<!--
<div class=big><div class=left><hr><b>筆順</b> ({{strokes}}画)</div></div>

{{stroke order}}<hr></div>
-->

CSS (I don't know if that's necessary, but just in case):

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}

.card1 { background-color: #FFFFFF; }
.card2 { background-color: #FFFFFF; }

ruby rt { visibility: hidden; }

ruby:hover rt { visibility: visible; }

.left {
  text-align: left;
}
.right {
  text-align: right;
}
.big {
 font-size: 25px;
}
.中{color:#3E5000;}
.高{color:#3E0000;}
.外{color:#686868;}

#typeans { 
    font-family: arial;
    margin: 0.2em; 
    padding: 5px; 
    font-size: 1.6em; 
    text-align: center; 
}

.onyomi-label {
    background: SeaGreen;
    padding: 0.2em;
    font-size: 25px;
}

.meaning-label {
    color: black;
    background: white;
    padding: 0.2em;
    font-size: 25px;
}

.kunyomi-label {
    color: black;
    background: lightblue;
    padding: 0.2em;
    font-size: 25px;
}

.expression {
    font-size: 5em;
}

.meaning {
    font-size: 1.4em;
    text-align: center;
}

.sentence {
    font-size: 1.4em;
    background-color: teal;
    padding: 0.2em;
}

.centered-block {
    display: inline-block;
    text-align: left;
    /* Uncomment if you want to set the maximum width of the block */
    /* max-width: 60vw; */
}

.meaning img { /* make images not take up to much vertical space */
    max-height: 6em;
}

.index {
  font-size: 1rem;
}

.story {
  margin-top: 2rem;
}

.comparison-item {
  display: inline-block;
  width: 150px;
  height: 150px;
}

.variant {
    margin-top: 1em;
    font-size: 2rem;
    text-align: center;
}

.variant .variant-label {

}

.variant .variant-character {
    font-size: 2em;
    display: block;
}

[BrayanDSO]

Already implemented. Enable it at Settings → Advanced → Type answer into the card

[BrayanDSO]

An alternative that may deliver a better result is to set the keyboard to Japanese, since it adds all the IME suggestions and you can still type in QWERTY mode.

Also, you can make the text input automatically change to japanese if you are using Gboard by setting Set keyboard language hint in the field in ANkiDroid

[Lolle2000la]

The first suggestion solved the problem, thanks! Regarding the second one, it isn't really practical since I have added some shortcuts for stuff that is hard to type even on desktop (like the character '[' resulting in '「中」', which would be cumbersome to type otherwise, especially on a phone.

The problem with the first suggestion is that it is applied to every card, it would be helpful if one could only disable the default way for certain card types, because it can still be very helpful.