So the other day it hit me that since iOS safari supports contenteditbale it should surely have support the clipboard events and other handy bits and pieces. Like any good hacker I created a testcase to find out basic support of events and getting selection range values, and as expected the support is pretty good. Let’s dive deeper.
Clipboard events
The testcase above hooks into six events that will trigger when the user does a clipboard operation, unfortunately the before[cut/copy/paste] events don’t seem to trigger.
Range objects
Range objects are what you’ve selected on the page allowing you to alter the selection or simply just return what a user has selected. Ranges also allow you to programmatically set a selection within your document, both of these work in iOS safari.
When setting a range iOS Safari won’t actually show the selection as highlighted but if you were to check the document selection it would return the correct content, desktop browsers will show the range selected in the document.
However if you do the same with a user action like tapping the “set selection range” button in the demo the iOS highlight will show up. Another interesting quirk is if I tap the content and bring the keyboard up but don’t dismiss it then refresh the page the programmatically set selection will show the iOS selection highlight.
Another interesting find is if you perform execCommand, which I’ll touch on later in the article, like bold it will apply the command to the selection made and make the iOS selection UI appear.
var sel = window.getSelection(),
range = document.createRange();
range.setStart($("h1")[0].firstChild, 5);
range.setEnd($("p")[2].firstChild, 50);
sel.removeAllRanges();
sel.addRange(range);
You’ll notice that when selecting an element I get its firstChild, which is a textnode, this is so the offset value will work and allows you to select half a textnode.
The code is saying create a range starting at the documents first h1 element offsetting the selection by 5 characters and ending at the 3rd paragraph offsetting the end of the paragraph by 50 characters.
Setting clipboard data
Accessing the clipboard is an incredibly sporadic task, there is sort of access in some browsers. IE has the most consistent behaviour similar to how DnD data setting works you have a clipboardData interface which has get and setData methods on it. Other browsers have semi-reversed engineered the IE API with the exception that clipboardData is on the event object rather than the window. iOS Safari allows you to get the clipboard data on a paste event but doesn’t allow you to set it.
There is hope that clipboard access will one day have some consistent support through the Clipboard API editor spec but that’s a long way off for now.
In the demo if you’ve copied text from another location and paste it it will alert the clipboard contents before being pasted.
if("clipboardData" in e && e.type === "paste") {
alert("Clipboard data: " + e.clipboardData.getData('text/plain'));
}
WYSIWYG
By adding support for the contenteditable attribute comes a whole swoth of API’s available for manipulating the contents, one of those is execCommand.
execCommand allows you to do a whole bunch things to the content. Take a look at this great resource which shows all the commands available and its support in the major browsers. These commands allow you to manipulate the style and html of the editable content (this is how all those fancy WYSIWYG editors work).
I would be keen to know if this works on other smart phone browsers, leave a comment if you know more details.
Short URL: http://cssn.in/ja/037
