Selecting text on focus using jQuery not working in iPhone iPad Browsers

Question

We are developing Web-App for Mobile browsers, we would like text of any input box to get selected whenever input-box get focus. Below answer fixes the issue for Desktop chrome/safari browser. Below solution works fine on Android browser, but not on iPhone/iPad browsers, any solution..

$("#souper_fancy").focus(function() { $(this).select() });

$("#souper_fancy").mouseup(function(e){
        e.preventDefault();
});

Ref:-

Selecting text on focus using jQuery not working in Safari and Chrome

Solution 1

Answer found here don't know how to mark this question as duplicate. Programmatically selecting text in an input field on iOS devices (mobile Safari)

My fix look like this:-

<script type="text/javascript">
           $('div,data-role=page').live('pageshow', function (event) {
               jQuery.validator.unobtrusive.parse(".ui-page-active form");
               $("input[type='text'], textarea, input[type='password'], input[type='number']").live('mouseup', function (e) { e.preventDefault(); });
               $("input[type='text'], textarea, input[type='password'], input[type='number']").live('focus', function () {this.setSelectionRange(0, 9999); });             
           });       
    </script>

Solution 2

You can use document.execCommand('selectAll');. However if the user scrolls the page, you will get the copy/paste menu showing.

This is what I use:

function trySelect(el, evenInactive, select_ios) {
    var select = function() {
        try {
            if (mojo.isTouch && select_ios && core.iosDevice && mojo.isInput(el) && document.execCommand) {
                document.execCommand('selectAll');
            } else {
                el.select();
            }
        } catch (e) {
        }
    };
    if (el && el.select && !el.disabled && (!el.readOnly || el.selectReadOnly) && mojo.isInput(el)) {
        if (evenInactive || mojo.activeElement() === el) {
            if (mojo.isTouch && core.webkitVer) {   // http://code.google.com/p/chromium/issues/detail?id=32865
                setTimeout(select, 0);
            } else {
                select();
            }
        }
    }
}

That references some internal functions:

• mojo.isTouch - true for a touch device
• core.iosDevice - true for an iOS device
• mojo.isInput - tests for an input element
• mojo.activeElement() - document.activeElement

edit: document.execCommand('selectAll'); should not be used and el.setSelectionRange(0, el.value.length); used instead. That seems to work fine on iOS5... It might not work on iOS4 (I don't have an iOS4 device to test on).

Solution 3

Maybe try this:

vmouseup
Normalized event for handling touchend or mouseup events

• http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

JS:

$("#souper_fancy").focus(function() { 
    $(this).select();
});

$("#souper_fancy").vmouseup(function(e){
    e.preventDefault();
});