creating "text selection" functionality (as seen in touchscreen browsers) using JavaScript

Question

I need to create following functionality in javascript:

1. User should be able to get into text selection mode (by long pressing a word or clicking a dedicated button, how user goes into text selection mode is not important)
2. Once in text selection mode, two handles should appear on the start and end of selection which will allow user to extend the selection (users will be able to drag the handle images to extend the selection)
3. Selected text would appear in highlighted mode

Following is an example of the same functionality in Android 3.0 browser:

I need to create the same functionality using Javascript. I tried to searhc "javascript text select" but could not finad anything useful. Can someone suggest me how to do this or point me to any existing work? Thanks much.

Answer 1

What you are stating is a very broad user interface problem and you cannot solve it with few lines of Javascript code. I am pretty well aware of existing mobile Javascript libraries and I have not yet come across a productized solution, because the problem in fact is really difficult.

• You need to have zoom/follow finger feature which applies complex heurestics to where the cursor actually should go

• Moving markers alongside in arbitary HTML text is troublesome - you need to have a way to split HTML to smaller pieces

Thus, I suggest you either

• Write a cross-platform faux text selection library (this is not a programming question, but a daily job for a person who knows HTML5 and mobile very, very, well)

• Post this a freelancher bounty job <-- a suggestion

From a technical point you

• can disable native text selection of devices (-webkit- special CSS styles)

• probably cannot interact with native clipboard through Javascript on mobile

• older Android devices lack proper Javascript events for the complex touch interaction in the first place