Symphonious

Living in a state of accord.

contentEditable in Mobile WebKit

What Is contentEditable?

JavaScript editors are all fundamentally based on a technology called contentEditable which makes a part of the web page become editable by the user. While there is a lot of functionality that’s usually bundled under the “contentEditable” title, there are a few core parts which are essential for a browser to support correctly1:

  • Selection – allowing the user to position a text caret in the content and select various parts of it.
  • Content entry and deletion – allowing the user to type basic text and to delete selected content.

Without these two key components of contentEditable it’s impossible to create a high-quality, WYSIWYG editor with JavaScript. Despite some variations in how things work, this functionality is available on all common desktop browsers and has been for quite a few years.

The Problem

On mobile WebKit, for both iOS and Android, the basics of contentEditable support aren’t working correctly. The problem is two fold:

  1. While the user can position a text caret and change the selection, the actual caret (the blinking vertical line), never renders so users don’t know where their typing will appear.
  2. The on-screen keyboard doesn’t appear when the caret is placed in an editable section. On devices without a real keyboard it’s then impossible to type.

WebKit is actually surprisingly close to getting this working, with a lot of the underpinning functionality appearing to work but these two issues prevent editors from being usable2.

Why Does It Matter?

While geeks may feel at home writing HTML code by hand or using a markup language like markdown or textile, non-technical users find it significantly easier to use a WYSIWYG editor. Currently, it’s not possible to offer such an editor on mobile devices due to the lack of contentEditable support.

Even worse is that many sites are already using a WYSIWYG editor which then prevents users on a mobile devices from contributing content – even when the rest of the site works perfectly. With mobile browsers improving so rapidly, most sites now work without needing special adjustments so the lack of contentEditable support is one of the few major incompatibilities.

How Might it be Fixed?

To be honest, I don’t know and don’t have the experience with the code involved to find the source of the problem and fix it. However, with both the source to WebKit and Android being open, hopefully someone does have the experience knowledge and a bit of time to solve this.

With WebKit being the browser engine of choice on so many devices, the fix may even flow around to a bunch of mobile OS’s.

Relevant Bug Reports

Android

iPhone

Apple don’t provide a public bug list, but this issue is logged as Radar #8399288. Apple do use the number of bug reports for an issue to adjust priority so if this issue is important to you, please do log an issue and cite Radar #8399288.

Others

I don’t currently have bug reports against other systems but would appreciate pointers to any relevant bugs for other systems (whether they use WebKit or not) so they can be tracked.

1 – The other major component is the execCommand function which provides built-in implementations of a number of common commands like bold, italic, etc. While it’s certainly useful to have these, they can generally be replaced by pure-JavaScript implementations without sacrificing quality or performance.

2 – I’m unaware of any mobile browser that supports contentEditable well enough to make an editor feasible. In fact, WebKit appears to be the closest to that milestone.

  • mmj says:

    “The on-screen keyboard doesn’t appear when the caret is placed in an editable section. On devices without a real keyboard it’s then impossible to type. ”

    Android users without a physical keyboard can bring up the virtual keyboard with a long press of the “Menu” key.

    It is still a bug that the keyboard doesn’t appear by itself. Android users may be unaware that this is possible. What’s more, when the keyboard is brought up manually the browser is unaware of it and thus won’t force the page into the correct position to be able to see the text you’re typing.

    October 11, 2010 at 2:37 am
  • Afraithe says:

    Actually, our testing shows that even long presses on Menu button does not bring up the keyboard on contentEditable fields, atleast on the 3-4 Android devices we tested it on, may work on some though.

    January 28, 2011 at 6:51 am
  • Tom says:

    Did not know the long press feature, to bring up the keyboard. Works like a charm on my Desire w/2.2, and I can use the contentEditable fields! Yay! Tested against the editor in Confluence.

    March 4, 2011 at 10:28 pm
  • kybernetikos says:

    @afraithe, it does on my Dell Streak.

    May 22, 2011 at 2:33 pm

Your email address will not be published. Required fields are marked *

*