Selecionando todo o texto na entrada de texto HTML quando clicado

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"

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" />

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.
            });
        });

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>

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.

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;
      });
    }
  };
}]);

Tentar:

onclick="this.select()"

Funciona muito bem para mim.

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

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

Seleciona todo o texto no elemento atualmente focado.

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.

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.

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.

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.

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.

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" />

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.

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).

Esta pergunta tem opções para quando .select () não está funcionando em plataformas móveis: Selecionando programaticamente texto em um campo de entrada em dispositivos iOS (Safari móvel)

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();
}

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.

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

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.

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

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); });
};