Is it possible to select all input text on iphone device when focus / click?

Question

Is it possible to select all input text on iphone device when focus / click?

Typically for a browser environment one would use:

$('input').bind('click focus', function() {
    $(this).select();
});

This works for desktop browsers but appears unresponsive for iPhone and presumably other mobile devices.

Dangelo

Have you tried adding touchstart and mspointerdown to the list of events? If this doesn't work, it may be blocked by the mobile OS, like controlling audio levels on video objects is. – Albrecht

Thanks for the recommendations. I will give that a go! – Dangelo

possible duplicate of Programmatically selecting text in an input field on iOS devices (mobile Safari) – Boyar

Very similar question: Select ALL in the input form contents on focus on iOS / Android – Decalescence

Answer 1

Basically you have to REARRANGE the events, so it's: focus, then click, then touchstart. You may also need to use .setSelectionRange(0,9999) instead of .select().

$('#myID').on('focus click touchstart', function(e){
    $(this).get(0).setSelectionRange(0,9999);
    e.preventDefault();
});

Joellajoelle

Why do you have e.preventDefault()? I don't think it's necessary is it? – Decalescence

Answer 2

Setting a (small) timeout works best for me: The iOS keyboard seems to be called in a delegate or something, as it kept loosing my focus event to be able to select stuff. The select() did not work for the same reason.

I fixed it this way:

function focusMe(vitem) {
    window.setTimeout(function() { 
      vitem.setSelectionRange(0, 9999);
    }, 10);
}

<input onfocus="focusMe(this)" />

Carlo

Answer 3

$('input[type="text"]').on('focus',function(){
    $(this).get(0).selectionStart=0;
    $(this).get(0).selectionEnd=999;
})

I originally found this information here, and there are other things people have tried that have achieved the result.

Credit

$(this).get(0) is exactly the same as this. – Croesus

indeed it is. How superfluous of me. – Credit

Answer 4

I would use something like this:

$('input').live("click", function() {
    $('input').each(function(){
        $(this).select();
    });
});
$('input').live("focus", function() {
    $('input').each(function(){
        $(this).select();
    });
});

Ancipital

Answer 5

You don't need jQuery. This is plain Javascript that will select all text when it receives focus on iOS:

document.querySelectorAll('input.someClass').forEach(element => {
    element.addEventListener('focus', event => {
        event.target.select();
    });
});

Change the query selector to match whatever input fields you require it on.

If it's not working, you could alternatively try using .setSelectionRange(0, 9999) instead of .select(), but I found that .select() worked well on my iPhone in 2024.

Decalescence