HTML5 nabízí jeden užitečný atribut, který vám umožňuje napsat si vlastní textový nebo WISIWIG editor jen pomocí HTML a JS. Je jím samozřejmě contenteditable a je podporovaný prakticky na všech moderních (2012+) prohlížečích.

Využívá ho celá řada editorů, např. TinyMCE nebo CKEditor a  různé blogovací weby, CMS a frameworky jako je WordPress.

Tak proč, když je tak rozšířený a všude funguje, nefunguje zrovna na vašem webu na iPhonu – zvlášť když je váš web na iPhone zaměřený?

Bude to pravděpodobně právě tím, že je váš web na iPhone specializovaný a tak obsahuje některé vychytávky určené přímo pro iPhone (resp. webkit obecně).

Poznámka: Tento problém se týká i Google Chrome na iOS, protože na rozdíl od ostatních verzí Chrome, které používají vlastní verzi Webkit (a touto chybou netrpí), tak Chrome na iOS je nucet použít webkit jádro z předinstalovaného Safari a tudíž se v něm tato chyba projevuje.

A ještě jedna poznámka: Na starých iPhonech (první a 3G verze)  opravdu fungovat nebude, protože tyto telefony obsahují pouze starou verzi iOS, kde contenteditable ještě nebyl implementován. iPhone 3GS a novější je možné updatovat na iOS6 nebo novější, které ho již podporují.

Jedním takovým je i CSS styl zakazující označení a výběr textu, který se často používá na iPhonu, aby se neznalým uživatelům nerozbil layout, když omylem déle podrží prst na stránce („Proč mám najednou modré pozadí u textu?!?“).

Pravděpodobně budete mít v  CSS podobnou definici:

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

Ta vypíná výběr textu a zobrazení kontextového menu. Bohužel ale Safari (a tedy i iPhone a iPad) tuto definici chápe i tak, že vůbec ve stránce nesmí zobrazit kurzor a pokud tedy do stránky přidáte contenteditable, Safari sice otevře klávesnici, ale již nezobrazí kurzor a nebude do stránky vypisovat napsaný text.

Oprava je celkem jednoduchá a spočívá v povolení výběru textu uvnitř právě editovaného obsahu:

[contenteditable] {
    -webkit-user-select: auto !important;
    /* alternativně můžete použít
       hodnotu 'text', která je defaultní
       pro textové elementy */
}

Druhou vlastnost (zákaz kontextového menu) řešit nemusíte, protože Safari již správně pochopí, že pokud můžete editovat text (user-select: text) musí povolit zobrazení kontextového menu pro kopírování a vložení textu (nebo ho za kontextové menu vůbec nepovažuje).

---

Pokud si zakládáte na rychlosti svých CSS, bude vhodnější všem editovatelným prvkům přiřadit nějakou třídu a pak ji použít v CSS:

.htmlEditor {
    -webkit-user-select: auto !important;
}

<div id="editor" class="htmlEditor"
     contenteditable="true"
>...</div>