Selection and highlighting of text in iphone/ipad web browser safari not working

Question

Possible duplicate: Change CSS of selected text using Javascript

I tried the code from above link but not getting the result for iPad browser to highlight the selected text.

function makeEditableAndHighlight(colour) {
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

It works flawlessly in desktop browser like safari, chrome. But in case of iPad safari browser, the way of selection is not similar to text selection as in any desktop browser and I am not getting the outcome to highlight the text.

My simple HTML code is:

     <div><h1>Introduction </h1></div>

     <div>          
            <p>This is an example: </p>
            <p>in other paragraph.</p> 
            <p>one more paragraph  </p>

            <button type="button" onclick="highlight('yellow')">Click Me!</button>
     </div>  

Please suggest if any changes need to be made or any other api needs to be included.

Answer 1

You've to trigger the highlight-function via touchend-event (and + click for desktop support):

jQuery

$('button').on('click touchend', function() {
    highlight('yellow');
});

Fiddle