Spencer Meyer Spencer Meyer - 1 year ago 161
jQuery Question

Selecting all content of text input on focus in microsoft edge

I seem to have run into an edge specific problem with selecting all of the text in an input field. I am using angular's ng-focus to call a function in the controller to select all the text in the field.



function selectAllTextOnFocus($event) {
$event.target.select();
}


This works fine in all browsers except microsoft edge, which will not select the text in the input field.

I have also tried another jquery solution that works except for the first selection of the input field. After that it works as intended and selects all of the text.

$('input').on('focus', function (e) {
$(this).one('mouseup', function () {
$(this).select();
return false;
}).select();
});


Is this just a known issue with edge or am I missing something?

Answer Source

I'm an engineer on the Microsoft Edge team, and see the issue to which you're referring. For the time being, you could call the select method after a brief delay:

function selectAllTextOnFocus($event) {
    if ( navigator.userAgent.match(/Edge\/(13|14)/) ) {
        setTimeout(function () {
            $event.target.select();
        }, 10)
        return;
    }
    $event.target.select();
}

Test both approaches here: https://jsfiddle.net/jonathansampson/xe9x9s7b/

I've taken the liberty to file a public bug on http://bugs.microsoftedge.com for tracking.