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

Question

I have the following jQuery code (similar to this question) that works in Firefox and IE, but fails (no errors, just doesn't work) in Chrome and Safari. Any ideas for a workaround?

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

Answer 1

It's the onmouseup event that is causing the selection to get unselected, so you just need to add:

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

Answer 2

$('#randomfield').focus(function(event) {
    setTimeout(function() {$('#randomfield').select();}, 0);
});

Answer 3

This works fine for input type="text" elements. What kind of element is #souper_fancy?

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

Answer 4

Just preventing default on mouseup causes the text selection to be ON at all times. The MOUSEUP event is responsible to clear the text selection. However, by preventing its default behaviour, you are unable to deselect the textusing the mouse.

To avoid that and get the text selection to work again, you can set a flag on FOCUS, read it from MOUSEUP and reset it so future MOUSEUP events will work as expected.

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

    //set flag for preventing MOUSEUP event....
    $this.data("preventMouseUp", true);
});

$("#souper_fancy").mouseup(function(e) {
    var preventEvent = $this.data("preventMouseUp");

    //only prevent default if the flag is TRUE
    if (preventEvent) {
        e.preventDefault();
    }

    //reset flag so MOUSEUP event deselect the text
    $this.data("preventMouseUp", false);
});

Answer 5

Use setSelectionRange() inside of a callback to requestAnimationFrame():

$(document).on('focus', '._selectTextOnFocus', (e) => {
    var input = e.currentTarget;
    var initialType = e.currentTarget.type;

    requestAnimationFrame(() => {
        // input.select() is not supported on iOS
        // If setSelectionRange is use on a number input in Chrome it throws an exception,
        // so here we switch to type text first.
        input.type = "text";
        input.setSelectionRange(0, Number.MAX_SAFE_INTEGER || 9999);
        input.type = initialType;
    });
});

Use setSelectionRange() instead of select() since select() doesn't work in mobile Safari (see Programmatically selecting text in an input field on iOS devices (mobile Safari)).

It is necessary to wait using requestAnimationFrame before selecting the text, otherwise the element isn't correctly scrolled into view after the keyboard comes up on iOS.

When using setSelectionRange() it is important to set the input type to text, otherwise it may throw exceptions on Chrome (see selectionStart/selectionEnd on input type="number" no longer allowed in Chrome).

Answer 6

While this works for selecting it in IE, Firefox, Chrome, Safari, and Opera, it won't let you edit it by clicking a second time in Firefox, Chrome, and Safari. Not entirely sure, but I think this may be due to those 3 browsers re-issuing a focus event even though the field already has focus thus never allowing you to actually insert the cursor (since you're selecting it again), whereas in IE and Opera it appears it isn't doing that so the focus event didn't get fired again and thus the cursor gets inserted.

I found a better fix in this Stack post that doesn't have that problem and works in all browsers.

Answer 7

This should work also in chrome:

$("#souper_fancy").focus(function() {
    var tempSouper = $(this);
    setTimeout(function(){
        tempSouper.select();
    },100);
});

Answer 8

Because there is flickering when you use setTimeout, there is another event based solution. This way the 'focus' event attach the 'mouseup' event and the event handler detach itself again.

    function selectAllOnFocus(e) {
    if (e.type == "mouseup") { // Prevent default and detach the handler
        console.debug("Mouse is up. Preventing default.");
        e.preventDefault();
        $(e.target).off('mouseup', selectAllOnFocus);
        return;
    }
    $(e.target).select();
    console.debug("Selecting all text");
    $(e.target).on('mouseup', selectAllOnFocus);
}

Then wire the first event

    $('.varquantity').on('focus', selectAllOnFocus);

Answer 9

If anyone comes again across this problem I got here a pure JS solution which is (at the moment) working on all browsers incl. mobile

<input type="text" value="Hello world..." onFocus="window.setTimeout(() => this.select());">

(without setTimeout() it's not working on Safari, mobile Safari and MS Edge)