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.