Seleziona tutti i contenuti della casella di testo quando riceve lo stato attivo (Vanilla JS o jQuery)

Che cos'è una soluzione Vanilla JS o jQuery che selezionerà tutto il contenuto di una casella di testo quando la casella di testo riceve lo stato attivo?

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

$(document).ready(function() {
  $("input[type=text]").focus().select();
});

$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

jQuery non è JavaScript, che in alcuni casi è più facile da usare.

Guarda questo esempio:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

Fonte: trucchi CSS , MDN

Questo non è solo un problema di Chrome / Safari, ho riscontrato un comportamento abbastanza simile con Firefox 18.0.1. La parte divertente è che questo non accade su MSIE! Il problema qui è il primo evento del mouse che forza a deselezionare il contenuto di input, quindi ignora solo la prima occorrenza.

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

L'approccio timeOut provoca uno strano comportamento e bloccando ogni evento del mouse non è possibile rimuovere la selezione facendo nuovamente clic sull'elemento di input.

HTML:

Enter Your Text : <input type="text" id="text-filed" value="test">

Utilizzando JS:

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

Utilizzando JQuery:

$("#text-filed").focus(function() { $(this).select(); } );

Utilizzando React JS:

Nel rispettivo componente all'interno della funzione di rendering -

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>

la mia soluzione è usare un timeout. Sembra funzionare bene

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});

Funzionerà anche su iOS:

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

So che il codice inline ha uno stile scadente, ma non volevo inserirlo in un file .js. Funziona senza jQuery!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>

Le risposte qui mi hanno aiutato fino a un certo punto, ma ho avuto un problema con i campi di input Numero HTML5 quando ho fatto clic sui pulsanti su / giù in Chrome.

Se si fa clic su uno dei pulsanti e si lascia il mouse sul pulsante, il numero continuerebbe a cambiare come se si stesse tenendo premuto il pulsante del mouse perché il mouse veniva gettato via.

Ho risolto questo problema rimuovendo il gestore del mouse non appena è stato attivato come di seguito:

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

Spero che questo aiuti le persone in futuro ...

Funzionerà, prova questo -

<input id="textField1" onfocus="this.select()" onmouseup="return false" /> 

Funziona in Safari / IE 9 e Chrome, ma non ho avuto la possibilità di testare in Firefox.

So che ci sono già molte risposte qui - ma questa manca finora; una soluzione che funziona anche con contenuti generati da Ajax:

$(function (){
    $(document).on("focus", "input:text", function() { 
        $(this).select(); 
    });
});

Sono stato in grado di migliorare leggermente la risposta di Zach incorporando alcune chiamate di funzione. Il problema con quella risposta è che disabilita completamente onMouseUp, impedendo così di fare clic nella casella di testo una volta che è attivo.

Ecco il mio codice:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

Questo è un leggero miglioramento rispetto alla risposta di Zach. Funziona perfettamente in IE, non funziona affatto in Chrome e funziona con successo alternato in FireFox (letteralmente ogni altra volta). Se qualcuno ha un'idea di come farlo funzionare in modo affidabile in FF o Chrome, ti preghiamo di condividere.

Comunque, ho pensato di condividere ciò che potevo per renderlo un po 'più bello.

Come @Travis e @Mari, volevo selezionare automaticamente quando l'utente ha fatto clic, il che significa impedire il comportamento predefinito di un mouseupevento, ma non impedire all'utente di fare clic. La soluzione che mi è venuta in mente, che funziona in IE11, Chrome 45, Opera 32 e Firefox 29 (questi sono i browser che ho attualmente installato), si basa sulla sequenza di eventi coinvolti in un clic del mouse.

Quando si fa clic su un input di testo che non ha lo stato attivo, si ottengono questi eventi (tra gli altri):

• mousedown: In risposta al tuo clic. La gestione predefinita aumenta focusse necessario e imposta l'inizio della selezione.
• focus: Come parte della gestione predefinita di mousedown.
• mouseup: Il completamento del clic, la cui gestione predefinita imposta la fine della selezione.

Quando si fa clic su un input di testo già attivo, l' focusevento viene ignorato. Come hanno notato entrambi @Travis e @Mari, la gestione predefinita di mouseupdeve essere prevenuta solo se focussi verifica l' evento. Tuttavia, poiché non esiste un focusevento "non accaduto", dobbiamo dedurlo, cosa che possiamo fare all'interno del mousedowngestore.

La soluzione di @ Mari richiede l'importazione di jQuery, che desidero evitare. La soluzione di @ Travis lo fa ispezionando document.activeElement. Non so perché esattamente la sua soluzione non funziona tutti i browser, ma c'è un altro modo per tenere traccia se l'input di testo è attivo: è sufficiente seguire il suo focuseblur eventi eventi.

Ecco il codice che funziona per me:

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

Spero che questo sia di aiuto a qualcuno. :-)

onclick="this.focus();this.select()"

Che cosa è una soluzione JavaScript o jQuery che seleziona tutto il contenuto di una casella di testo quando la casella di testo riceve attenzione ?

Devi solo aggiungere il seguente attributo:

onfocus="this.select()"

Per esempio:

<input type="text" value="sometext" onfocus="this.select()">

(Onestamente non ho idea del perché tu abbia bisogno di qualcos'altro.)

Questo ha funzionato per me (pubblicare poiché non è nelle risposte ma in un commento)

 $("#textBox").focus().select();

$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

Modifica: per la richiesta di @ DavidG, non posso fornire dettagli perché non sono sicuro del perché funzioni, ma credo che abbia qualcosa a che fare con l'evento focus che si propaga su o giù o qualunque cosa faccia e l'elemento di input che riceve la notifica ha ricevuto il focus. L'impostazione del timeout dà all'elemento un momento per rendersi conto che è stato fatto.

Se concatenate gli eventi insieme credo che elimini la necessità di usare .onecome suggerito altrove in questo thread.

Esempio:

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});

Nota: se si sta programmando in ASP.NET, è possibile eseguire lo script utilizzando ScriptManager.RegisterStartupScript in C #:

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

Oppure digita semplicemente lo script nella pagina HTML suggerita nelle altre risposte.

Ho seminato questo da qualche parte, funziona perfettamente!

            $('input').on('focus', function (e) {
                $(this)
                $(element).one('mouseup', function () {
                        $(this).select();
                        return false;
                    })                        .select();
            });

Sono un po 'in ritardo alla festa, ma funziona perfettamente in IE11, Chrome, Firefox, senza confondere il mouseup (e senza JQuery).

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});

La mia soluzione è la prossima:

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

Quindi il mouseup funzionerà normalmente, ma non farà deselezionare dopo aver ottenuto lo stato attivo per input