Relation to #1101

There already exists an issue requesting support for mobile platforms, however that issue is broad and the feature request / issue here only covers a narrow subset of those needs.

Expected Behavior

Xterm.js is a front-end component written in TypeScript that lets applications bring fully-featured terminals to their users in the browser.

Given this usage of xterm.js on any platform should feel transparent - that is to say that whenever an input is made (key pressed, text pasted, etc...) it should be reflected immediately. This is no less true for mobile devices

Actual Behavior

Of course mobile devices have special optimizations and features. One such feature are 'smart' software keyboards. These cause behavior that is confusing and unexpected for the user.

When typing in mobile (tested on Chrome for Android) 'predictive' text appears ahead of the cursor until it is entered. Additionally a long history of entered text is maintained in some in-between layer, causing the 'backspace' key to behave counter-intuitively. See a demonstration of the behavior in this gif: (tested on the latest 'master' running in SourceLair.) (Actually also documented by #675)

Proposed Solution

How do you remove predictive / smart features of mobile keyboards? Passwords!

Solving this issue is possible by changing the HTML element type of the terminal's textarea to an input and adding the type='password' attribute. Example commit

To see the changes in action start a new SourceLair project (language Node10) based on this fork:
https://github.com/oclyke/xterm.js-mobile

And switch to the branch predictive-keyboard_textarea-to-password-input

⌛wait for changes to be recompiled ⌛

Check out your demo at the public URL! Try it on desktop and mobile. You will find that now all keyboard inputs are routed immediately to the control of xterm.js -- that means no more unpredictable behavior! This method is lightly tested on:

• Chrome on Mac OSX
• Chrome for Android
• Safari for iOS

This method does cause a warning about a password input not contained in a form... could be suppressed by wrapping the input in a form.

Implementation / PR

I'd like to see this feature added to xterm.js in the near future for a project I am working on because the whole point is for it to work on mobile (bluetooth control of a micropython board via the web). I'm looking to the xterm.js veterans to guide me toward an acceptable implementation.

Right now I can think of two possible paths forward:

• Just make the change. One commit, one type change (across 7 files), and the addition of the type='password' attribute.
• Create a Terminal construction option as to which password to use. Allows existing / desktop use cases to be blissfully unaware of any change, but creates additional complexity.

The first option is tidy but it might have unintended consequences that a more experienced xterm.js developer could identify. The second option seems to be clunky and likely to add more code than is necessary for this.

Does anyone else have another idea of how to support mobile in this regard?

Thanks

I would love to see this make it into a new release! So would:
#1902
#1635
#675
#945 ?