Selecionando todo o texto na entrada de texto HTML quando clicado


555

Eu tenho o código a seguir para exibir uma caixa de texto em uma página da Web HTML.

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

Quando a página é exibida, o texto contém a mensagem Digite a ID do usuário . No entanto, descobri que o usuário precisa clicar 3 vezes para selecionar todo o texto (nesse caso, por favor, digite o ID do usuário ).

É possível selecionar o texto inteiro com apenas um clique?

Editar:

Desculpe, esqueci de dizer: devo usar a entrada type="text"


6
Uma abordagem melhor é usar um <label>para o rótulo e não o value. Você pode usar JS e CSS para fazer com que pareça o mesmo, embora não seja tão anti-semântico. dorward.me.uk/tmp/label-work/example.html tem um exemplo usando jQuery.
Quentin

12
Ou use um espaço reservado se estiver trabalhando em um projeto moderno em HTML5.
Léo Lam

1
placeholder = "Digite o ID do usuário"
Marcelo Bonus

Respostas:


910

Você pode usar este snippet javascript:

<input onClick="this.select();" value="Sample Text" />

Mas, aparentemente, não funciona no Safari móvel. Nesses casos, você pode usar:

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

9
Para tornar isso mais geral, você pode usar this.idcomo argumento para o manipulador de cliques. Melhor ainda, você pode eliminar getElementByIdcompletamente e passar thiscomo argumento.
Asad Saeeduddin

12
No Safari móvel, isso não funciona. Tente chamar this.setSelectionRange (0, 9999).
Dean Radcliffe

43
@DeanRadcliffe Nice one! Eu usaria em seu this.setSelectionRange(0, this.value.length)lugar.
2grit


8
Alguma atualização no suporte ao navegador? w3schools.com/jsref/met_text_select.asp reivindicações é suportado por todos os navegadores
Ayyash

65

As soluções postadas anteriormente têm duas peculiaridades:

  1. No Chrome, a seleção via .select () não fica fixa - a adição de um pequeno tempo limite resolve esse problema.
  2. É impossível colocar o cursor no ponto desejado após o foco.

Aqui está uma solução completa que seleciona todo o texto em foco, mas permite selecionar um ponto específico do cursor após o foco.

        $(function () {
            var focusedElement;
            $(document).on('focus', 'input', function () {
                if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
                focusedElement = this;
                setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

7
Para lidar com o caso em que o usuário clica fora do campo e depois novamente, adicione.on('blur', 'input', function(){focusedElement = null;})
Tamlyn

1
um tempo limite de 0obras para mim no chrome e no firefox. não sei de onde 50vem o tempo limite .
thejoshwolfe 4/08/15

1
A solução é usar onClick em vez onFocus. Funciona perfeitamente e não precisa de códigos complicados.
Ismael

4
@CoryHouse não importa, porque o Foco via guia seleciona nativamente o texto! Não é necessário javascript.
Ismael

1
@CoryHouse, mesmo depois de quatro anos, seus códigos funcionam como um encanto. Cara, faça uma reverência. Obrigado por este pequeno truque sujo. Eu estava pesquisando por 2-3 dias até encontrar este. : +1:
Rutvij Kothari

47

Html (você precisará colocar o atributo onclick em todas as entradas para as quais deseja trabalhar na página)

 <input type="text" value="click the input to select" onclick="this.select();"/>

OU UMA OPÇÃO MELHOR

jQuery (isso funcionará para todas as entradas de texto na página, não há necessidade de alterar seu html):

<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>  
<script type="text/javascript">
    $(function(){
        $(document).on('click','input[type=text]',function(){ this.select(); });
    });
</script>

22
Provavelmente seria melhor associar ao evento de foco em vez de clicar para aqueles que navegam pelos elementos do formulário.
Andrew Ensley

7
@ Andrew Isso não é necessário, pois o texto sempre é selecionado se você percorrer os elementos de entrada. ;-)
nietonfir

os eventos de foco são defeituosos, o evento de desfoque, por outro lado, é útil para acionar a validação e o salvamento automático de formulários, funciona quando você guia também!
OLinkWebDevelopment 8/03

Deve funcionar bem, verifique se você está usando uma versão atualizada do jQuery ou use $ (document) .live () em versões mais antigas.
OLinkWebDevelopment 8/08

2
A menos que o usuário já tenha o jQuery, uma opção melhor não envolve a adição de uma dependência em uma biblioteca de terceiros.
Ross

37

Eu sei que isso é antigo, mas a melhor opção é agora usar o novo placeholderatributo HTML, se possível:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

Isso fará com que o texto seja exibido, a menos que um valor seja inserido, eliminando a necessidade de selecionar texto ou limpar as entradas.


2
Observe que o espaço reservado é permitido apenas com o doctype html.
31414 DogWaf

12

As respostas listadas são parciais de acordo comigo. Vinculei abaixo dois exemplos de como fazer isso no Angular e no JQuery.

Esta solução possui os seguintes recursos:

  • Funciona para todos os navegadores que suportam JQuery, Safari, Chrome, IE, Firefox, etc.
  • Funciona para Phonegap / Cordova: Android e IOs.
  • Seleciona apenas uma vez depois que a entrada obtém o foco até o próximo desfoque e depois o foco
  • Múltiplas entradas podem ser usadas e isso não ocorre.
  • A diretiva angular tem uma excelente reutilização, basta adicionar a diretiva selecionar tudo ao clicar
  • JQuery pode ser modificado facilmente

JQuery: http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview

$("input").blur(function() {
  if ($(this).attr("data-selected-all")) {
  //Remove atribute to allow select all again on focus        
  $(this).removeAttr("data-selected-all");
  }
});

$("input").click(function() {
  if (!$(this).attr("data-selected-all")) {
    try {
      $(this).selectionStart = 0;
      $(this).selectionEnd = $(this).value.length + 1;
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    } catch (err) {
      $(this).select();
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    }
  }
});

Angular: http://plnkr.co/edit/llcyAf?p=preview

var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var hasSelectedAll = false;
      element.on('click', function($event) {
        if (!hasSelectedAll) {
          try {
            //IOs, Safari, thows exception on Chrome etc
            this.selectionStart = 0;
            this.selectionEnd = this.value.length + 1;
            hasSelectedAll = true;
          } catch (err) {
            //Non IOs option if not supported, e.g. Chrome
            this.select();
            hasSelectedAll = true;
          }
        }
      });
      //On blur reset hasSelectedAll to allow full select
      element.on('blur', function($event) {
        hasSelectedAll = false;
      });
    }
  };
}]);

boa solução angularjs. valeu. embora eu não use o sinalizador hasSelectedAll. Eu acho que isso é uma provisão para um segundo clique, o que pode significar que o usuário deseja colocar o cursor.
dewd

11

Tentar:

onclick="this.select()"

Funciona muito bem para mim.


11

Você sempre pode usar document.execCommand( suportado nos principais navegadores )

document.execCommand("selectall",null,false);

Seleciona todo o texto no elemento atualmente focado.


Parece ser uma solução elegante. O código completo teria a seguinte aparência:<input type="text" onclick="document.execCommand('selectall',null,false);" />
pipepiper

Sim, é a minha maneira favorita de fazer esse tipo de tarefa, esp. como funciona para contenteditableelementos também. Eu acho que você também pode torná-lo um pouco mais elegante, ou seja, <input type="text" onfocus="document.execCommand('selectall')">- com certeza você pode remover o nulle falsese não os usar.
Toastrackenigma

Sim. onfocusparece melhor que onclick. e sim, pode-se acabar com nulle false. Obrigado!
pipepiper

Concordo que esta é a melhor solução entre navegadores, com a ressalva de que o tempo limite mencionado na solução @Corey House deve ser usado para tornar esse navegador cruzado compatível.
Eric Lease

1
ao usar onfocus, a página inteira é selecionada quando a entrada é clicada no Chrome. onclickfunciona bem.
robotik 16/05

8

foco automático de entrada, com evento onfocus:

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

Isso permite abrir um formulário com o elemento desejado selecionado. Ele funciona usando o foco automático para atingir a entrada, que então envia um evento de foco automático, que por sua vez seleciona o texto.


8

Nota: Quando você considera onclick="this.select()": No primeiro clique, Todos os caracteres serão selecionados. Depois disso, talvez você queira editar algo na entrada e clicar entre os caracteres novamente, mas ele selecionará todos os caracteres novamente. Para corrigir esse problema, você deve usar em onfocusvez de onclick.


6

De fato, use, onclick="this.select();"mas lembre-se de não combiná-lo com disabled="disabled"- ele não funcionará e você precisará selecionar manualmente ou clicar várias vezes para selecionar ainda. Se você deseja bloquear o valor do conteúdo a ser selecionado, combine com o atributo readonly.


4

Aqui está uma versão reutilizável da resposta de Shoban:

<input type="text" id="userid" name="userid"
 value="Please enter the user ID" onfocus="Clear(this);"
/>

function Clear(elem)
{
elem.value='';
}

Dessa forma, você pode reutilizar o script claro para vários elementos.


4

Você pode substituir

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

Com:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

O espaço reservado é usado para substituir o valor como você deseja que as pessoas possam digitar na caixa de texto sem precisar clicar várias vezes ou usar as teclas Ctrl + a. O marcador de posição faz com que não seja um valor, mas como o nome sugere um marcador de posição. É isso que é usado em vários formulários on-line que diz "Nome de usuário aqui" ou "E-mail" e quando você clica nele, o "E-mail" desaparece e você pode começar a digitar imediatamente.


3

A solução exata para o que você pediu é:

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

Mas suponho que você esteja tentando mostrar "Insira o ID do usuário" como um espaço reservado ou dica na entrada. Portanto, você pode usar o seguinte como uma solução mais eficiente:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

3

Aqui está um exemplo no React, mas ele pode ser traduzido para jQuery no vanilla JS, se você preferir:

class Num extends React.Component {

    click = ev => {
        const el = ev.currentTarget;
        if(document.activeElement !== el) {
            setTimeout(() => {
                el.select();    
            }, 0);
        }
    }

    render() {
        return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
    }
}

O truque aqui é usar onMouseDownporque o elemento já recebeu o foco no momento em que o evento "click" é acionado (e, portanto, oactiveElement verificação falhará).

o activeElement verificação é necessária para que o usuário possa posicionar o cursor onde desejar, sem selecionar novamente constantemente toda a entrada.

O tempo limite é necessário porque, caso contrário, o texto será selecionado e, em seguida, instantaneamente desmarcado, como eu acho que o navegador faz o controle do posicionamento do cursor após as palavras-chave.

E, por último, el = ev.currentTargeté necessário no React porque o React reutiliza objetos de evento e você perde o evento sintético no momento em que o setTimeout for acionado.


é reagir o novo jQuery?
Vpzomtrrfrt 01/04/19

@vpzomtrrfrt Certamente é: DJ / K. Eu escrevi isso no React e não estava disposto a desautorizá-lo apenas por alguns pontos da SO. Tomá-lo ou deixá-lo :-)
MPEN

Como isso é um exemplo no React ?! Este é mais um exemplo em javascript nativo.
Cesar

2

O problema de capturar o evento click é que cada clique subsequente no texto o selecionará novamente, enquanto o usuário provavelmente esperava reposicionar o cursor.

O que funcionou para mim foi declarar uma variável, selectSearchTextOnClick e defini-la como true por padrão. O manipulador de cliques verifica se a variável ainda é verdadeira: se for, ela a define como false e executa o select (). Em seguida, tenho um manipulador de eventos de desfoque que o define novamente como verdadeiro.

Até agora, os resultados parecem o comportamento que eu esperaria.

(Edit: Eu esqueci de dizer que havia tentado capturar o evento de foco como alguém sugeriu, mas isso não funciona: depois que o evento de foco é acionado, o evento de clique pode ser acionado, desmarcando imediatamente o texto).



2

Html como este <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

e código javascript sem ligação

function textSelector(ele){
    $(ele).select();
}

4
"javascript:" é usado apenas no href e deve ser evitado.
user1133275

1

Bem, essa é uma atividade normal para um TextBox.

Clique 1 - Definir foco

Clique em 2/3 (clique duplo) - Selecionar texto

Você pode definir o foco no TextBox quando a página for carregada pela primeira vez para reduzir a "seleção" a um único evento de clique duplo.


1
Também 2 cliques são para seleção de palavras e 3 para seleção de linhas.
Arthur

1

Use "espaço reservado" em vez de "valor" no seu campo de entrada.


0

Se você estiver usando o AngularJS, poderá usar uma diretiva personalizada para facilitar o acesso:

define(['angular'], function () {
    angular.module("selectionHelper", [])
    .directive('selectOnClick', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {                
                element.on('click', function () {
                    this.select();
                });
            }
        };
    });
});

Agora pode-se usá-lo assim:

<input type="text" select-on-click ... />

A amostra está com requirejs - portanto, a primeira e a última linha podem ser ignoradas se você estiver usando outra coisa.


0

Se alguém quiser fazer isso na página carregar w / jQuery (doce para campos de pesquisa) aqui está a minha solução

jQuery.fn.focusAndSelect = function() {
    return this.each(function() {
        $(this).focus();
        if (this.setSelectionRange) {
            var len = $(this).val().length * 2;
            this.setSelectionRange(0, len);
        } else {
            $(this).val($(this).val());
        }
        this.scrollTop = 999999;
    });
};

(function ($) {
    $('#input').focusAndSelect();
})(jQuery);

Com base neste post. Graças a CSS-Tricks.com


0

Se você está apenas tentando ter um texto de espaço reservado que é substituído quando um usuário seleciona o elemento, obviamente é uma prática recomendada usar o placeholderatributo hoje em dia. No entanto, se você deseja selecionar todo o valor atual quando um campo ganha foco, uma combinação das respostas @Cory House e @Toastrackenigma parece ser a mais canônica. Use focusefocusout eventos, com manipuladores que configuram / liberam o elemento de foco atual e selecionam todos quando focados. Um exemplo angular2 / typescript é o seguinte (mas seria trivial para converter em vanilla js):

Modelo:

<input type="text" (focus)="focus()" (focusout)="focusout()" ... >

Componente:

private focused = false;

public focusout = (): void => {
    this.focused = false;
};

public focus = (): void => {
    if(this.focused) return;
    this.focused = true;

    // Timeout for cross browser compatibility (Chrome)
    setTimeout(() => { document.execCommand('selectall', null, false); });
};
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.