Potrzebuję zrobić najprościej jak można wprowadzanie znaków z klawiatury, ale nie do pola tekstowego, tylko wprost do kodu JavaScript. Założenie jest takie, że na stronie ma być jakaś kontrolka, którą jak się kliknie, to wprowadza się tekst. Na smartfonie ma działać tak, jak dla pola tekstowego, czyli pokazać się wirtualna klawiatura. W tej wirtualnej klawiaturze powinien działać Enter i Backspace.

Po wielu próbach wymyśliłem to, co poniżej. Na komputerze działa prawidłowo, łącznie z Enter i Backspace (naciśnięcie Backspace wykrywam poprzez stwierdzenie, że tekst po zmianie jest krótszy niż przed zmianą). Aby tak działało, kontrolka musi być typu TextArea, bo w zwykłym Textbox nie działa Enter, jednak to nie jest problemem. Druga sprawa to taka, że żeby Backspace działał, musi być jakiś tekst bazowy (w moim kodzie zmienna InputTextBase), który jest wstawiany zaraz po obsłużeniu zdarzenia wprowadzenia tekstu. Na komputerze działa prawidłowo, ale na smartfonie tekst domyślny sprawia problemy polegające na częstym wysyłanie tego tekstu do funkcji CharInput, co daje niepożądany efekt (tekst domyślny nie podlega przetwarzaniu, przetwarzaniu podlega tylko to, co napisze użytkownik). Klawisz Backspace na smartfonie sprawia taki problem, że jak się wielokrotnie go naciska, to kursor przeskakuje do tyłu i w praktyce zadziała tyle razy, ile jest znaków w tekście domyślnym. Jak tekst domyślny jest pusty, to klawisz Backspace w ogóle nie działa ani na komputerze, ani na smartfonie, jednak nie ma wyżej opisywanych problemów przy wprowadzaniu liter. Jednak na smartfonie przy wprowadzaniu znaków specjalnych typu $ # / ! często sam wprowadza się jakiś tekst, co nie jest pożądane, na komputerze ten problem w ogóle nie występuje.

Problem na smartfonie występuje zarówno w przeglądarce Firefox na Android i Chrome na Android. Jak bezproblemowo obsłużyć wprowadzanie znaków na smartfonie? Jak wspomniałem, tylko na komputerze działa bez problemu. Użycie document.addEventListener("keydown", KeyPress, false); mija się z celem, ponieważ na smartfonie nie wyświetla się wirtualna klawiatura, a zdarzenie nie rozróżnia wielkości liter i znaków specjalnych.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
    </head>
    <body>
        <input type="button" id="BtnClear" onClick="Clear()" value="Clear">
        <textarea rows="1" cols="1" style="resize:none" id="InputText" oninput="InputTextEvent(event)"></textarea>
        <input type="text" id="InputText2" oninput="InputTextEvent(event)">
        <br>
        <span id="X"></span>
        <script>

            var InputTextBase = "X";
            var InputTextBaseL = InputTextBase.length;
            var InputTextControl = document.getElementById("InputText");

            function Clear()
            {
                document.getElementById("X").innerHTML = "";
            }
            
            function InputTextInit()
            {
                InputTextControl.value = InputTextBase;
            }
            
            InputTextInit();

            function Print(X)
            {
                document.getElementById("X").innerHTML += (X + "<br>");
            }
            
            function CharInput(X)
            {
                if (X == -1)
                {
                    Print("Backspace");
                    return;
                }
                if (X == 10)
                {
                    Print("Enter");
                    return;
                }
                if (X >= 32)
                {
                    Print("Char " + X + " - " + String.fromCharCode(X));
                    return;
                }
                else
                {
                    Print("Control code " + X);
                }
            }
            
            function InputTextEvent(Evt)
            {
                var Val = InputTextControl.value;
                var ValL = Val.length;
                var CharOut = "";
                if (ValL < InputTextBase.length)
                {
                    CharInput(-1);
                }
                if (ValL > InputTextBase.length)
                {
                    if (Val.substr(0, InputTextBaseL) == InputTextBase)
                    {
                        CharOut = Val.substr(InputTextBaseL);
                        for (var I = 0; I < CharOut.length; I++)
                        {
                            CharInput(CharOut.charCodeAt(I));
                        }
                    }
                    else
                    {
                        var Diff = -1;
                        for (var I = 0; I < InputTextBaseL; I++)
                        {
                            if (Val.charCodeAt(I) != InputTextBase.charCodeAt(I))
                            {
                                Diff = I;
                            }
                        }
                        CharOut = Val.substr(Diff, ValL - InputTextBaseL);
                        for (var I = 0; I < CharOut.length; I++)
                        {
                            CharInput(CharOut.charCodeAt(I));
                        }
                    }
                }
                InputTextControl.value = InputTextBase;
                //X.selectionStart = 100;
                //X.selectionEnd = 100;
            }
            

        </script>
    </body>
</html>