Over a million developers have joined DZone.

Rich Text Imput on iOS

DZone's Guide to

Rich Text Imput on iOS

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

Rich text input is difficult on any platform, but I discovered a rather cheeky, but simple trick to give you rich text inputs on iOS.

The way a number of rich text input libraries work (like CodeMirror and Ace), is that when you're typing, you're typing in to a tiny, almost hidden, textarea. This value is then echoed and rendered using styled spans and the like creating a rich mirror of your input. Of course the editors are much more complicated than that - but our iOS technique follows this idea really closely.

Basically, in iOS if you set an input or textarea to have an opacity of zero, you can't see it (obviously!). However when you focus the element, the cursor is fully visible.

Also, selection still work, though it only shows the selection colour and block, not the text.

Example of rich text selection in iOS

So what we do is sit a textarea on top of a div, listen for keyup, and take the value in the textarea, run it through a parser to get something syntax highlighting and place the rendered HTML under the textarea. This gives the illusion that we have a rich text input element.

You could use this trick to allow the user to select and highlight certain parts of a document - just like you can in the mobile version of google docs in edit mode.

Here's a demo that you can try out on an iOS device, which when you type will syntax highlight the code: example rich text input for iOS

Finally, if you want to learn more about mobile development, my conference Full Frontal, is running a full 2 day masterclass with the lord of mobile: PPK, so check it out (including ticket to the conference & exclusive dinner with the workshop teachers).

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda


Published at DZone with permission of Remy Sharp, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}