Uzycie klawiatury telefonu w aplikacji HTML

Próbuję znaleźć optymalny sposób na umożliwienie wprowadzania znaków za pomocą klawiatury telefonu. Nie chodzi o standardowe pole tekstowe, tylko o to, żeby pojawiła się klawiatura wbudowana w telefon i każdy naciśnięty znak, czy to standardowy, czy ąćęłńóśźż, czy inny dostępny dla użytkownika, wyzwalał funkcję JavaScript, której parametrem jest wpisywany znak.

Użytkownik klika określone miejsce na ekranie aplikacji, pojawia się klawiaturka, z której może korzystać, a jak użytkownik kliknie poza tym polem, to klawiatura znika.

Generalnie, to udało mi się to zrealizować w kilku wariantach różniących się tylko rodzajem pola z klawiaturą: https://andrzejlisek.github.io/KlawiaturaTelefon.html

Jak widać (cały kod aplikacji jest dostępny poprzez standardowy widok źródła), użyte są odpowiednio pole tekstowe, pole do hasła i textarea w tej samej roli. Wszystkie trzy warianty działają prawie dobrze, ale jest kilka problemów:

1. W polu testowym i textarea, ja się pisze na telefonie, to wpisuję słowo i jak nacisnę spację, to wpisuje się to samo słowo jeszcze raz, co nie jest zamierzone. Jak wpisze kawałek słowa i telefon podpowie słowo, które zaakceptuję, to funkcja nie dostaje sygnału wymazania wprowadzonych znaków i wpisuje wybrane słowo. Np. zacznę wpisywać "Kom", telefon podpowie "Komputer", to będzie wpisane KomKomputer, a po pierwszych trzech literach nie mam informacji, ze one nie są aktualne.
2. Pole z hasłem wydaje się działać najlepiej w tej roli nie wprowadza dodatkowych i niezamierzonych znaków, można kontrolować wielkość liter.

Jak to dobrze zrobić, żeby działał i słownik i dobrze wchodziły słowa. Jak telefon sam chce podpowiedzieć słowo to jak w JavaScript odebrać informację, że dopiero co wpisane znaki są nieaktualne i wtedy hipotetycznie telefon odebrałby "Kom[backspace][backspace][backspace]Komputer"?

Czy może lepiej jeszcze inaczej zrobić ideę, żeby uzyskać klawiaturę wbudowaną w telefon i za jej pomocą wysterować działaniem aplikacji zamiast tworzyć zwykłego pola tekstowego?

Teraz też nie obsługuje ci zastępowania tekstu tekstem ze schowka i wychodzi KomKomputer zamiast Kom[backspace][backspace][backspace]Komputer. Zastępowanie tekstem z autocomplete prawdopodobnie działa podobnie, być może możesz wykryć zastąpienie słowa przez odczytanie selectionStart i selectionEnd choć nie chce mi się tego teraz sprawdzać.

A możesz dać konkretnie przykład użycia?
W jakim przypadku tekst w inpucie ma być inny od tego który jest w spanie? Obawiam się że jeśli pomysł z obsługą zaznaczenia nie zadziała to nic nie wymyślisz i możesz jedynie polegać na aktualnej zawartości pola (.value) które będzie zawsze aktualne. Sam na podstawie poprzedniej zawartości tego pola musiałbyś wyliczyć różnicę i odpowiednio zareagować.

Nie wiem jak wygląda twój przypadek ale przykładowo jeśli chcesz wprowadzanie słowami to wygląda to dość łatwo - aktualne słowo niech sobie siedzi w inpucie i w reakcji na spację mógłbyś wymazać słowo i przekazać do aplikacji. Wtedy obsługujesz słowo dopiero gdy jest kompletne. Przy backspace możesz do pola wprowadzić poprzednie słowo i też by to działało dobrze. Pytanie w jakim przypadku potrzebujesz częściowego inputu. No i nie zapomnij o obsłudze wklejania ze schowka.

A możesz dać konkretnie przykład użycia?

Emulator terminala XTERM/VT100 lub starej konsoli gier w JavaScript, gdzie przewiduje się także wpisywanie tekstu. Zastosowań tego może być wiele, celem jest przeniesienie na telefon programu sterowanego klawiaturą, w szczególności klawiszami z literami.

W jakim przypadku tekst w inpucie ma być inny od tego który jest w spanie?

Dopisywanie wprowadzonych znaków do span to jest tylko najprostszy test działania, a nie ostateczny cel aplikacji. Chodzi o samą rzecz, że jest program sterowany klawiaturą w JS lub WASM. Na komputerze można to zrobić bez najmniejszego trudu, wystarczy oprogramować onkeypress i tyle. Załóżmy, że już to mam. Teraz chciałbym, żeby ten sam program był używalny na telefonie. mogę namalować potrzebne pola, które się będzie dotykać, ale bardziej naturalnym sposobem wydaje się skorzystanie z klawiatury wbudowanej w telefon. Nie chodzi o konkretne zastosowanie biznesowe, tylko o samą rzecz, ze każde naciśnięcie klawisza wywołuje reakcję oprogramowaną w JavaScript. W przypadku komputera, to nie ma żadnego problemu, żeby oprogramować naciskanie wszystkich znaków, Enter i Backspace. Natomiast, jak telefon nagle zmienia wpisane słowo, albo w polu text nawet, jak wpisze się całe słowo zgodnie z intencją i naciśnie spację, to telefon drugi raz wpisuje to słowo. Mi chodzi tylko o to, ze by wyczuć, że telefon chce podmienić słowo, a nie tylko dopisywać kolejne znaki. W moim testowym projekcie, ktory podlinkowałem, skrypt JavaScript nie wyczuwa podmiany i dlatego program wariuje. A to, jak skutek wywoła naciśnięcie klawisza "backspace" lub wywołanie zdarzenia "zmarz ostatnią literę", to już zależy od potrzeb i kodu obsługi zdarzenia. Teraz chodzi o wyczucie samego faktu, że telefon zastępuje jeden znak drugim.

Sam na podstawie poprzedniej zawartości tego pola musiałbyś wyliczyć różnicę i odpowiednio zareagować.

Coś takiego próbowałem i to mniej więcej działało, wrócę do tego rozwiazania i potestuję. Chodzi o to, ze na komputerze mogę skorzystać ze zdarzenia onKeyDown, a na telefonie nie ma klawiatury, ale tą samą ideę przenieść na klawiaturę wbudowaną w telefon.

Pytanie w jakim przypadku potrzebujesz częściowego inputu.

Jak wyżej napisałem, nie chodzi o cześciowy input, tylko o zrobienie czegoś, co robi keyDown. Ten cel został osiągniety i najlepiej działa za pomocą pola do hasła, ale w zamian za brak autopoprawy wprowadzanych słów. Natomiast, jak wykorzysta się pole tekstowe zwykłe, to program w obecnym kształcie odbiera tylko litery i to powoduje, ze porgram głupieje.

No i nie zapomnij o obsłudze wklejania ze schowka.

Akurat to sprawdziłem i działa dobrze dla wszystkich trzech pól. Jak pole jest puste i dokona się wklejenia tekstu za pomoca funkcji wbudowanej w telefon (przytrzymanie palca na polu i kliknięcie "wklej"), to skrypt bez problemu uruchomi się tyle razy, ile znaków ma wklejony tekst i ten ciag znaków zostanie przetworzony. Efekt jest identyczny, jak ręczne wpisanie tego tekstu bez autopoprawiacza.

Przetestowałem propozycję i udało mi się uruchomić z zamierzonym skutkiem. Link https://andrzejlisek.github.io/KlawiaturaTelefon.html jest zaktualizowany.

Są dwa warianty, które różnią się tylko rodzajem pola. Jedno to pole do hasła, drugie to pole tekstowe.

Algorytm dla obu wariantów jest taki sam. Posiadam tylko jeden telefon a Androidem Huawei Mate 10S, sprawdziłem na Chrome i na Firefox, na obu działa prawidłowo.

To działa w następujący sposób:

1. Przyjęcie i utrata focus resetuje pole i stan wewnętrzny.
2. Utrzymywany stan wewnętrzny śledzi wpisywany tekst i pozycję kursora.
3. Stan wewnętrzny i pozycja kursora po następnym zdarzeniu pozwala wychwycić tekst automatycznie podstawiony i generuje zdarzenia backspace w wymaganej ilości, żeby skasować poprzedni tekst i wstawić nowy.
4. Algorytmicznie, liczba naciśnięć klawiszy backspace jest ograniczona do minimum, żeby uniknąć sytuacje, ze są kasowane te same znaki, żeby znowy wstawiać te same.
5. To, co pojawia się w span, to jest wysyłane do programu docelowego, czyli takie byłyby zasymulowane nacisnięcia znaków na klawiaturze i nacisnięcia klawisza Backspace.

Niestety, nie posiadam IPhona, żeby móc to sprawdzić, czy na IPhone będzie tak samo to działać.