Prevent device keyboard from displaying after selecting an image in TinyMCE

[siobhan]

Whenever I'm on my iPhone and I tap into the text editor the keyboard appears, which is expected behaviour.

This can get confusing when working with images. When an image is inserted into the visual editor I tap on it to edit the image. I expect to just get image editing options. But the keyboard also pops up. This doesn't make any sense since I can't actually do anything with text to edit the image. I also lose half that screen.

Is there any way to prevent the keyboard from appearing if just the image is tapped? It can be quite disorientating as it currently is because I am going to work with images but the device is acting like I'm working with text.

[DrewAPicture]

I wonder if it could be that the title or caption field or something is being focused when clicking on the image -- thus launching the keyboard.

[iseulde]

I'm not sure if we can hide the keyboard. If focus is within the contenteditable area, then the keyboard will automatically open. There's no way to control this. The only way to hide the keyboard is to move the focus out of the area, but then we would need to find a way to keep the image toolbar visible and refocus every time you click a button, and quickly remove focus again. I'm not sure if this could even work and it's a big hack with little benefit imho. :) The main problem is that the browser doesn't allow any control. @azaozz can probably tell us a bit more.

[ryan]

Unexpected keyboard fly up poisons several important interactions. Fixing this, if possible, is worth some investment.

A related scenario involves scrolling the editor. You finish editing and tap Done to dismiss the keyboard. You then attempt to scroll the screen, perhaps to scroll down to the Publish box. Any attempts to scroll while the editor is under your finger results in the keyboard flying up. To avoid keyboard fly up, you must scroll in the tiny margins alongside the editor, tap the toolbar to get to the top of the screen where you can tap outside the editor, or just live with the keyboard being in your way until you can scroll to a place where you can tap outside the editor.

[azaozz]

As @iseulde mentions above, there is no way to prevent opening the onscreen keyboard. There is a long-winded hack for closing it:

• Guess when the keyboard is open.
• Move focus to a visible text field somewhere else on the page. It has to be visible (as opposed to display: none or visibility: hidden) to receive focus and ideally it has to be whiting the boundaries of the current viewport so the browser doesn't scroll.
• Blur the text field. At this point focus is set to the body and the keyboard should close.
• Setting the focus directly to the body or a "non-typable" element doesn't work.

We could try this hack but... It is a hack, not sure if/when it will break. BTW iOS Safari doesn't even select images inside contenteditable. It ignores the clicks. We have to select them "by hand".

Perhaps one day there will be more control of the onscreen keyboard in mobile browsers. Not holding my breath though.

[DrewAPicture]

Bummer. See comment:7.