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

Question

We are developing browsers for web applications for mobile devices, so we want the text of any input window to be selected when the input unit receives focus. Below answer fixed problem for Chrome Chrome / Safari browser. The below solution works fine in the Android browser, but not in the iPhone / iPad browsers, any solution ..

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

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

Ref: -

Select text in focus using jQuery not working in Safari and Chrome

Answer 1

The answer found here I do not know how to mark this question as a duplicate. Programmatically select text in input field on iOS devices (Mobile Safari)

: -

<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>

Answer 2

, :

vmouseup
touchhend mouseup

• 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();
});

Answer 3

document.execCommand('selectAll');. , , /.

, :

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();
            }
        }
    }
}

:

• mojo.isTouch - true
• core.iosDevice - true iOS
• 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. This seems to work fine on iOS5 ... It may not work on iOS4 (I don't have an iOS4 device to test).

Answer 4

This works for me.

        $("input[type='text'],select,textarea").focus(function () {
            $(this).addClass('text-focus');
        });

        $("input[type='text'],select,textarea").blur(function () {
            $(this).removeClass('text-focus');
        });

       .text-focus
       {
       border: 1px solid #ea9a00;
       }