Spencer Meyer Spencer Meyer - 4 months ago 42
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

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.

Comments