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.

Hallux

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

Bye

Which iOS-version do you use? – Bye

ya thanks it is working, in older version of jquery it was not supported. I have to dowload the new jquery library 1.8.3. .Earlier i was using jquery 1.6.4 which does not support it. – Hallux

@Terry yeah, the on-event handler isn't supported in versions earlier then 1.7. (For jQuery < 1.7 you can use .bind instead). – Bye

You might also find this post as helpful as I did. iPhones seem to disable any javascript related to a user highlighting text - using .bind() with touchstart and touchend solved the problem. – Tieshatieup