Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mobile Safari jQuery select() on focus input doesn´t work

This problem is on iPad IOS6 in mobile Safari.

I wan´t the text in an input to be auto selected when the user clicks the input.

I have a solution that works in a regular browser, like Chrome:

        $(document).ready(function() {
        //Select text on focus for input
        $("input:text").focus(focustext);
    });
    function focustext() {
        var input = $(this);
        setTimeout(function() { 
            input.select();
        },100);
    }

But this isn´t working in Safari Mobile.

I have read several threads about this, for example: Workaround to Webkit[Chrome/Safari] javascript select on focus bug (when using tab between fields) Selecting text on focus using jQuery not working in iPhone iPad Browsers

I have tested suggested sollution in a simple dummy, but I can´t get any of them to work on iPad. http://kraner.se/customers/test.html

I would like the get a working sollution for this. Anyone?

like image 861
Turbojohan Avatar asked Oct 21 '22 12:10

Turbojohan


1 Answers

I changed the javascript to this (changed how selection of text is done and how to get input variable):

        $(document).ready(function() {
        //Select text on focus for input
        $("input:text").focus(focustext);
    });
    function focustext() {
        var input = this;
        setTimeout(function () {
            input.selectionStart = 0;
            input.selectionEnd = input.val().length;
        },100);
    }

and now it works as intented. inputs with type=number does not seem to work though.

I have tested this on iOS6 and iOS7, and it also works in latest Chrome and IE on Windows 7. IE in compability mode does not work, though.

like image 96
Andreas Paulsson Avatar answered Oct 24 '22 04:10

Andreas Paulsson