Regarding Mobile Compatibility

[AmalChandru]

Instead of keypress event input event seems to work for mobile devices. By checking the user-agent, we can dynamically select which event to be fired ( ie inputfor mobile and keypress for desktop). @KSubedi What are your thoughts?

[vishruti-ajmera]

I have same issue input tool not working in mobile. I HAVE ALSO TRIED KEYDOWN AND INPUT EVENT IN BUNDLE JS FILE. Please help me to fix this issue as soon as possible.

[AmalChandru]

I have been successful in doing the same on mobile devices by making a dynamic selection of the event based on the user agent.

Use a boolean to check whether the device is mobile or not.

const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

Select the event according to isMobile.

return (
             (t.prototype.registerListeners = function () {
              this.transliterationProvider.inputArea.addEventListener(
              isMobile ? "input" : "keypress",
              this.handleKeyPress()
            );

Manage both mobile and web independently

(t.prototype.handleKeyPress = function () {
                        var t =
                            "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
                                ""
                            );
                        return function (e) {
                            if (isMobile) {
                                const text =
                                    this.transliterationProvider.inputArea
                                        .value;

                                if (-1 !== t.indexOf(e.data)) {
                                    this.transliterationProvider.inputArea.value =
                                        text.slice(0, -1);
                                    this.transliterationProvider.suggestionBox.startSuggestions(
                                        e.data
                                    );
                                } else if (
                                    e.inputType === "insertText" &&
                                    -1 === t.indexOf(e.data)
                                ) {
                                    this.transliterationProvider.suggestionBox.endSuggestions();
                                    this.transliterationProvider.inputArea.value =
                                        text.slice(0, -1) + e.data;
                                } else if (e.inputType === "insertLineBreak") {
                                    this.transliterationProvider.inputArea.value =
                                        text + "\n";
                                } else if (
                                    e.inputType === "deleteContentBackward"
                                ) {
                                    this.transliterationProvider.inputArea.value =
                                        text.slice(0, -1);
                                }
                            } else {
                                -1 !== t.indexOf(e.key) &&
                                    (this.transliterationProvider.suggestionBox.startSuggestions(
                                        e.key
                                    ),
                                    e.preventDefault());
                            }
                        }.bind(this);
                    }),
                    t
                );
            })();
            e.EventHandler = i;
        }

Note: In the case of mobile implementation you have to manage edge cases and tweak the styles as per the context

[vishruti-ajmera]

Thank you so much. Your answer working perfect. Just has syntax error in 6th last line. }.bind(this); }, t ); })(); e.EventHandler = i; }