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

Selecionar o texto de um campo com jquery

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.

 

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *