jQuery - zaznacz cały tekst z obszaru tekstowego

130

Jak mogę to zrobić, aby po kliknięciu w obszarze tekstowym cała jego zawartość została zaznaczona?

I w końcu, gdy klikniesz ponownie, aby odznaczyć.

Alex
źródło
5
@Blender: Nie, to pytanie dotyczy podświetlania tekstu w elemencie, a nie textarea. Te dwie rzeczy są całkiem różne.
Tim Down

Odpowiedzi:

194

Aby użytkownik nie denerwował się, gdy cały tekst jest zaznaczany za każdym razem, gdy próbuje przesunąć kursor za pomocą myszy, należy to zrobić za pomocą focuszdarzenia, a nie clickzdarzenia. Następujące będzie wykonać zadanie i radzi sobie z problemem w Chrome, który zapobiega najprostsza wersja (czyli po prostu wywołanie textarea za select()metodę w focusobsługi zdarzeń) z pracy.

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

Kod:

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

Wersja 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;
    });
});
Tim Down
źródło
10
Myślę, że lepiej jest zaimplementować to za pomocą osobnego przycisku „zaznacz cały tekst”, ponieważ automatyczne zaznaczanie tekstu przy aktywnym lub kliknięciu jest naprawdę denerwujące.
RobG
2
to nie działa dla mnie w Chrome, działające rozwiązanie to: stackoverflow.com/a/6201757/126600
zack
@zack: Przykład jsFiddle w tej odpowiedzi działa dla mnie w Chrome. Czy to nie dla ciebie? Zgadzam się, że odpowiedź, z którą się łączysz, jest bardziej niezawodna.
Tim Down
@TimDown: masz rację, byłem trochę zbyt gorliwy - faktycznie działa poprawnie na „kliknięciu”, ale zawodzi, jeśli wchodzisz tabw obszar tekstowy - twoje drugie rozwiązanie działa w obu przypadkach :)
zack
Zmień nieznacznie powyższy kod i będzie działał jak urok .. $("#foo").mouseup(function() { $("#foo").unbind("mouseup"); return false; }); musisz odwołać się do pola tekstowego bez używania thispo prostu odesłać go z pełną ścieżką .. i będzie działać ..
pratikabu
14

Lepszy sposób, z rozwiązaniem problemu zakładek i chrome oraz nowym sposobem 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;
            });
        }
    });
Matiesky
źródło
11

Skończyło się na tym:

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});
Alex
źródło
ale nie wiem, jak sprawdzić, czy tekst jest już zaznaczony, więc mogę odwrócić te dwie akcje :(
Alex
1
@Alex: Na twoim miejscu nie bałbym się tym zbytnio. Użytkownicy oczekują standardowego zachowania od obszarów tekstowych.
Tim Down
nie, ten konkretny obszar tekstu jest przeznaczony tylko do kopiowania i wklejania. cały tekst, który mam w środku, to duży zaszyfrowany ciąg, który można albo całkowicie zastąpić, albo skopiować do schowka
Alex
@Alex: Ach, racja. Możesz chcieć, aby był tylko do odczytu, dodając readonlynastępnie atrybut.
Tim Down
1
@Hollister: Nie, jest całkowicie możliwe, aby użytkownik lub skrypt wybrał zawartość w div. Prawdopodobnie myślisz o skopiowaniu do schowka, co nie jest możliwe w skrypcie bez biblioteki opartej na Flashu, takiej jak ZeroClipboard.
Tim Down
7
$('textarea').focus(function() {
    this.select();
}).mouseup(function() {
    return false;
});
Phil LaNasa
źródło
5

Nieco krótsza wersja jQuery:

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

Prawidłowo obsługuje narożną obudowę Chrome. Zobacz przykład http://jsfiddle.net/Ztyx/XMkwm/ .

Ztyx
źródło
4

Zaznaczanie tekstu w elemencie (podobne do podświetlania myszą)

:)

Korzystając z zaakceptowanej odpowiedzi w tym poście, możesz wywołać funkcję w następujący sposób:

$(function() {
  $('#textareaId').click(function() {
    SelectText('#textareaId');
  });
});
Todd
źródło
Może oznaczenie tego pytania jako duplikatu może być bardziej przydatne? To nie była twoja odpowiedź, więc lepiej połączyć oba pytania.
Blender
Zgoda - chociaż PO mógłby skorzystać z dodatkowego wyjaśnienia jej wdrożenia. :)
Todd
To pytanie dotyczy wyróżnienia tekstu w elemencie, a nie w obszarze tekstowym. Te dwie rzeczy są całkiem różne.
Tim Down
dzięki, dowiedziałem się, że mogę to zrobić $(this).select(), użyję tego, ponieważ jest mniej kodu :)
Alex