Are there best practices for forms with HTML input elements when they must be used on a mobile device?

On my in-development web application, when running on an Android phone, the input field is often covered by the software keyboard when the field gets focus. The result of this is that the user must enter the text blindly, only seeing what was typed after the keyboard is dismissed.

My online searches have only turned up one treatment of the problem, and it seems rather complicated (I am wary of complicated solutions: they seem fragile and prone to breaking unpredictably).

I have a couple of ideas, one being to always shift the input field to the top of the view window when it receives focus, the second to open a subordinate dialog with a single text element under which the keyboard should always fit. However, these also trigger my complicated solution anxiety.

With internet-connected mobile phones as ubiquitous as they are, I suspect that this problem of the keyboard covering input field has a solution. I just can't find it. Please help me. :(

  • Welcome to the site, chuckj! Can you describe the one treatment in a few words? I don't see anything special on my desktop browser, and I don't have my android running in parallel on this site... I've often seen you second suggestion, to move the input field upwards so it stays visible, and didn't feel anything awkward with it. So this would be my recommendation. – virtualnobi Jan 4 '19 at 19:51
  • The link is to a site with html/css/javascript/output panes, where the javascript pane has code that tries to detect the keyboard by caching device orientation and screen metrics and tracking changes to those values. It's a clever idea, but I think that false positives are possible (something other than a keyboard might intrude into the viewport) and with the multitude of possible android screen resolutions, it may also be possible that the algorithm might miss a keyboard appearance. I'm afraid it's too fragile and complicated. – chuckj Jan 6 '19 at 20:24

The system should give feedback to the user about what is going on. Enter the text blindly is a very bad experience. You could solve this by advancing automatically to the next field, and making sure the keyboard is not obstructing the field. This article from UX Planet show a good example: Mobile form usability

  • That's actually my point. I don't know how to detect if the keyboard is displayed. The example I sited above makes an attempt to detect the keyboard, but there seems to be no way to directly read the keyboard status. Instead the example infers the keyboard status by interpreting several screen metrics. – chuckj Jan 4 '19 at 3:24
  • I often spend days or longer trying to engineer a solution like the ones I suggested above, only to find that there is a simple and elegant solution that I overlooked. I posted the question in the hope that someone can direct me to the elegant solution. – chuckj Jan 4 '19 at 3:33
  • 1
    I don't know about how to detect or implement it. As this site is focused on user experience, maybe you should try posting your question on stackoverflow.com. – Aline Jan 4 '19 at 10:30
  • I considered that, but in the seeming absence of a means to detect the keyboard, it seems like there must exist in use an acceptable UI approach that sidesteps the problem. Otherwise, there would be many more complaints about the bad user experience with HTML forms on Android devices. – chuckj Jan 4 '19 at 17:43

I used CSS bottom:0 with the fixed position property which pushes the element to the footer and fixes it so when the keyboard is raised it pushes it upwards automatically.

Not the answer you're looking for? Browse other questions tagged or ask your own question.