jQuery: seleziona tutto il testo da un'area di testo


130

Come posso farlo in questo modo quando fai clic all'interno di un'area di testo, viene selezionato il suo intero contenuto?

E alla fine quando fai di nuovo clic per deselezionarlo.



5
@Blender: No, quella domanda riguarda l'evidenziazione del testo in un elemento, non in un'area di testo. I due sono abbastanza diversi.
Tim Down,

Risposte:


194

Per evitare che l'utente si infastidisca quando viene selezionato l'intero testo ogni volta che provano a spostare il cursore con il mouse, è necessario farlo utilizzando l' focusevento, non l' clickevento. Ciò che segue farà il suo lavoro e risolverà un problema in Chrome che impedisce alla versione più semplice (cioè di chiamare semplicemente il select()metodo textarea in un focusgestore di eventi) per funzionare.

jsFiddle: http://jsfiddle.net/NM62A/

Codice:

<textarea id="foo">Some text</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>

versione jQuery:

$("#foo").focus(function() {
    var $this = $(this);
    $this.select();

    // Work around Chrome's little problem
    $this.mouseup(function() {
        // Prevent further mouseup intervention
        $this.unbind("mouseup");
        return false;
    });
});

10
Penso che sia meglio implementare queste cose usando un pulsante separato "seleziona tutto il testo" poiché selezionare automaticamente il testo sugli eventi focus o click è davvero fastidioso.
RobG

2
questo non riesce per me in Chrome, la soluzione di lavoro è: stackoverflow.com/a/6201757/126600
zack

@zack: l'esempio jsFiddle in questa risposta funziona per me in Chrome. Non fa per te? Sono d'accordo che la risposta a cui sei collegato è più sicura.
Tim Down

@TimDown: hai ragione, ero un po 'troppo zelante - in realtà funziona correttamente su "clic", ma fallisce se ti trovi tabnell'area di testo - l'altra soluzione funziona in entrambi i casi :)
zack

Cambia leggermente il codice sopra e funzionerà come un incantesimo .. $("#foo").mouseup(function() { $("#foo").unbind("mouseup"); return false; }); devi fare riferimento alla casella di testo senza usare thisbasta fare riferimento con il percorso completo .. e funzionerà ..
pratikabu,

14

Modo migliore, con soluzione al problema tab e chrome e nuovo modo jquery

$("#element").on("focus keyup", function(e){

        var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if(keycode === 9 || !keycode){
            // Hacemos select
            var $this = $(this);
            $this.select();

            // Para Chrome's que da problema
            $this.on("mouseup", function() {
                // Unbindeamos el mouseup
                $this.off("mouseup");
                return false;
            });
        }
    });

11

Ho finito per usare questo:

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});

ma non so come verificare se il testo è già selezionato, quindi posso invertire le due azioni :(
Alex

1
@Alex: se non fossi in te non farei troppo casino. Gli utenti si aspettano un comportamento standard dalle textareas.
Tim Down,

no, questa particolare textarea è pensata solo per copia-incolla. tutto il testo che ho al suo interno è una grande stringa codificata che può solo essere interamente sostituita o copiata negli appunti
Alex

@Alex: Ah, giusto. Potresti voler renderlo di sola lettura aggiungendo quindi l' readonlyattributo.
Tim Down,

1
@Hollister: No, è perfettamente possibile per l'utente o lo script selezionare il contenuto all'interno di un div. Probabilmente stai pensando di copiare negli appunti, cosa impossibile negli script senza una libreria basata su Flash come ZeroClipboard.
Tim Down

6
$('textarea').focus(function() {
    this.select();
}).mouseup(function() {
    return false;
});

5

Versione jQuery leggermente più corta:

$('your-element').focus(function(e) {
  e.target.select();
  jQuery(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

Gestisce correttamente la custodia angolare Chrome. Vedi http://jsfiddle.net/Ztyx/XMkwm/ per un esempio.


4

Selezione del testo in un elemento (simile all'evidenziazione con il mouse)

:)

Utilizzando la risposta accettata su quel post, puoi chiamare la funzione in questo modo:

$(function() {
  $('#textareaId').click(function() {
    SelectText('#textareaId');
  });
});

Forse contrassegnare questa domanda come duplicato potrebbe essere più utile? Non è stata davvero la tua risposta, quindi sarebbe meglio unire le due domande.
Blender,

Concordato - Sebbene il PO possa beneficiare della spiegazione aggiunta per la sua attuazione. :)
Todd,

Tale domanda riguarda l'evidenziazione del testo in un elemento, non in un'area di testo. I due sono abbastanza diversi.
Tim Down,

grazie, ho scoperto che posso farlo con $(this).select(), lo userò perché è meno codice :)
Alex
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.