7

I'm making a chat service, and I want to support mobile devices well.

On a screenshot below, there is an input field. It allows typing text, and to avoid issues like "if the text field is unfocused typing does nothing" it automatically gets focused when clicking outside of it - this does improve the experience on desktop computers. However, on devices with software keyboard, this causes on-screen keyboard to appear on mobile devices which is distracting.

enter image description here

Considering clicking anywhere focuses the text input, is it somehow possible to make on-screen keyboard only appear when the text field is pressed? Or alternatively, somehow detect devices with software keyboard enabled and disable this feature for them. Preferably without explicitly trying to detect mobile devices, touch screen or whatever as there exist touch screen devices with hardware keyboards.

This issue I was able to reproduce in Google Chrome and Opera Mobile on Android, and apparently it happens on iPhones, although I have no device to test it on.

Here is a rather simple example of an issue. If you touch the pink rectangle, it will cause touch keyboard to appear, which I don't want.

<input type=text id=f>
<div style="background: pink; height: 200px; width: 200px" onclick="f.focus()">
Konrad Borowski
  • 11,584
  • 3
  • 57
  • 71

2 Answers2

7

The short answer is that this is a built in function and you can't stop it, but there are a couple of options to consider.

1) use the onFocus event to immediately trigger the blur event to hide the keyboard again.

2) set readonly="true" on the element, later remove it and trigger the focus event.

3) create a fake input element with div's and css, when you want to trigger the keyboard focus on a hidden input field and copy out the value of the input on the keyup event as the user types.

Hope these suggestions were helpful to you.

digital-pollution
  • 1,054
  • 7
  • 15
  • 1
    Option two worked, on Angular ``. In the nogOnInit() `this.showInput = true;` and ngAfterViewInit `setTimeout(() => { this.showInput = false; this.inputBarcode.nativeElement.focus(); }, 500);` – Swoox Mar 23 '20 at 10:24
  • 1
    AFAICT the "readonly" solution causes problems on iOS. The input correctly shows as focused & the keyboard stays down, but if I then tap the text box manually, the keyboard still doesn't show and I can't enter text (even with an external keyboard). I have to tap somewhere else to blur it first, and then tap it in order for it to work again. – CletusW Jun 05 '20 at 22:36
1

If I got this right, you may also consider to change the logic of focusing the textfield when there is a click "anywhere". On touch-devices the touch events get dispatched first and you can cancel the click-handling (look for preventDefault(), return false; or stopPropagation() which should be called in you touch event handler).

You will need another event listener which handles the touch events outside the textfield, e.g. "touchstart".

If you want to keep the ui effect of a focused textfield, just add a css class "focused" to the textfield by script instead of using textfield:focused{} for your styles.

Wolfgang
  • 876
  • 5
  • 13
  • I want to keep the ui effect, and as you suggested, if I just add the class "focused", then how will I remove it when the some other field is focused? ('blur' won't trigger since the field is not focused at all) – Devendra Haldankar Nov 12 '22 at 13:51