Selecionar o texto de um campo com evento onFocus

Como selecionar o texto de um campo “input text ou textarea” durante o evento onFocus, utilizando jQuery ou apenas o Javascript puro

Para realizar essa ação pelo jQuery utilizamos o seguinte código:

jQuery(".input-test").focus(function() { 
  jQuery(this).select(); 
} );

Configuramos o evento .focus e utilizamos a função .select() para selecionar o texto.

Faça o teste clicando no campo abaixo aonde o texto deverá ser selecionado.

Utilizando apenas Javascript

Para fazer isso sem o jQuery devemos declarar o evento no proprio elemento.

<input type="text" onfocus="selecionar_texto(this)" id="test" name="test">

Além dessa “pequena” função para facilitar as nossas vidas.

Recurso necessário para selecionar o texto é document.createRange que pode ser utilizado tanto para selecionar um texto normal em um paragrafo como dentro de um campo.

/* função para selecionar o texto de um campo texto */function selecionar_texto(el, win) {
    win = win || window;
    var d = win.document, sel, rng;
    if (win.getSelection && d.createRange) {
        sel = win.getSelection();
        rng= d.createRange();
        rng.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (d.body.createTextRange) {
        rng = d.body.createTextRange();
        rng.moveToElementText(el);
        rng.select();
    }
}

Obviamente se você já utiliza o jQuery em seu projeto, utilize a primeira solução.