Zaznacz całą zawartość pola tekstowego, gdy zostanie aktywowane (Vanilla JS lub jQuery)


310

Co to jest rozwiązanie Vanilla JS lub jQuery, które wybiera całą zawartość pola tekstowego, gdy pole tekstowe zostanie aktywowane?



3
@gdoron z jakiegoś powodu ten link przekierowuje do samego pytania.
Destrictor


Problem z większością tych rozwiązań polega na tym, że nie działają one poprawnie podczas zmiany pozycji kursora w polu wprowadzania. Spójrz na moją odpowiedź tutaj: stackoverflow.com/a/20826207/641452
Colin Breame

Odpowiedzi:


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

23
Również tylko dla dodatkowych informacji: „input [type = text]” teraz może być „input: text” pozdrowienia
Ricardo Vega

8
Wydaje się, że to nie działa w przypadku Chrome, a strona internetowa jQuery twierdzi, że jest zależna od przeglądarki. Czy ktoś może zweryfikować?
Kenny Wyland

71
Wygląda na to, że przeglądarki WebKit przeszkadzają w tym z powodu zdarzenia mouseup. Dodałem to i zadziałało: $ ('input: text'). Mouseup (function (e) {return false;});
Kenny Wyland,

5
Kenny ma rację, ale niestety „najechanie myszką” wpływa również na sterowanie pokrętłem Chrome. Wydaje się, że włączenie „kliknięcia” zamiast „skupienia” rozwiązuje ten problem
Richard Kennard

24
Używam w ten sposób: $ („input: text”). Select (). Focus ();
Phuong,

227

<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />


43
+ onmouseup = „return false”, aby zatrzymać odznaczanie kliknięcia
Anthony Johnston

2
+1 za jakiś rodzaj stopEvent dla mouseup, lub to nie działa niezawodnie. Wadą tego jest to, że gdy kursor znajdzie się w polu, kliknięcie gdzieś w zaznaczonym tekście w celu ustawienia kursora w tym miejscu nie działa; kliknięcia są skutecznie wyłączone. Mimo to w sytuacjach, w których pożądany jest wybór całego tekstu na fokus, jest to prawdopodobnie mniejsze zło.
rejestracja

Byłem w stanie nieco poradzić sobie z problemem podniesionym przez enigment, ustawiając zmienną globalną doMouseUp na false, podczas zdarzenia onMouseDown, jeśli to! = Document.activeElement. Następnie, podczas onMouseUp, zresetuj doMouseUp na true i zwróć wartość doMouseUp przed zresetowaniem. Jest to skomplikowane i wymaga kodu - opublikuję odpowiedź wyjaśniającą to lepiej.
Travis,

1
NIE dodawaj, onmouseup="return false;"jeśli chcesz, aby użytkownik mógł swobodnie zaznaczać i edytować tekst po skupieniu się w polu tekstowym. Za pomocą tego kodu tekst zostanie zablokowany w sytuacji „zaznacz wszystko”, a użytkownik nie będzie mógł go edytować, chyba że użytkownik wpisze nowy tekst lub użyje klawiszy strzałek, aby się poruszać. Szczerze mówiąc, wydaje się to dziwnym zachowaniem i nie miałoby sensu, chyba że pole tekstowe ma być trwale nieedytowalne (a zatem wyłączone).
ADTC

1
Technicznie rzecz biorąc, nie potrzebujesz, onmouseup="return false;"jeśli chcesz, aby wybór następował po pierwszym kliknięciu lub kliknięciu przez użytkownika . I +1 za waniliowy javascript!
clabe45

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

3
Potwierdzony. Obecnie najwyżej oceniona / zaakceptowana odpowiedź nie działa w Chrome.
Aron Boyette

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

1
To jest dobre. Dzięki! Komentarz związany z odpowiedzią Zacha ma jedną wadę polegającą na zapobieganiu domyślnemu mouseupzdarzeniu: „gdy kursor znajdzie się w polu, kliknięcie gdzieś w zaznaczonym tekście, aby ustawić kursor tam, nie działa; kliknięcia są skutecznie wyłączone. w sytuacjach, w których zaznaczenie całego tekstu jest pożądane, prawdopodobnie jest to mniejsze zło ”.
JohnK,

25

jQuery nie jest JavaScriptem, który w niektórych przypadkach jest łatwiejszy w użyciu.

Spójrz na ten przykład:

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

Źródło: CSS Tricks , MDN


7
Może to nie przeszkadza, jeśli nie masz nic przeciwko pomieszaniu kodu i kodu; większość ludzi stara się obecnie, aby ich skrypt był „dyskretny”. Och ... a jQuery jest JavaScript.
Andrew Barber

2
Dzięki za sugestię onclick, działa świetnie. Nie wszyscy korzystają z jQuery, więc cieszę się, że widzę inną opcję.
Lukus

zakłada to, że użytkownicy używają tylko myszy
osobisty

można użyć onfocus = "this.focus (); this.select ()" dla klawiatury
Muhammad Nadeem

21

To nie jest tylko problem z Chrome / Safari, doświadczyłem dość podobnego zachowania z Firefoksem 18.0.1. Zabawne jest to, że na MSIE tak się nie dzieje! Problemem jest tutaj pierwsze zdarzenie mouseup , które wymusza odznaczenie treści wejściowej, więc po prostu zignoruj ​​pierwsze wystąpienie.

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

Podejście timeOut powoduje dziwne zachowanie, a blokując każde zdarzenie myszy, nie można usunąć zaznaczenia, klikając ponownie element wejściowy.


1
+1 za użycie jednego, aby zapobiec pojedynczemu najechaniu myszką. Naprawdę nie podobało mi się, że po pierwszym kliknięciu nie mogłem zaznaczać tekstu za pomocą myszy.
Pluc

13

HTML:

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

Za pomocą JS:

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

Za pomocą JQuery:

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

Za pomocą React JS:

W odpowiednim składniku wewnątrz funkcji renderowania -

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

2
To działa dla mnie w React:onFocus={(e) => e.target.select()}
Paito

11

moim rozwiązaniem jest użycie limitu czasu. Wygląda na to, że działa dobrze

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

To rozwiązanie, którego używam i preferuję. Używam wartości limitu czasu równej 0, ponieważ spowoduje to dodanie go na końcu bieżącej kolejki zdarzeń, co oznacza, że ​​będzie działać po zdarzeniu „mouseup”.
DavidM


4

Wiem, że kod wbudowany jest złym stylem, ale nie chciałem umieszczać go w pliku .js. Działa bez 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>

3

Odpowiedzi tutaj pomogły mi do pewnego momentu, ale miałem problem z polami wejściowymi Numer HTML5, gdy kliknąłem przyciski góra / dół w Chrome.

Jeśli klikniesz jeden z przycisków i opuścisz mysz nad przyciskiem, liczba będzie się zmieniać tak, jakbyś przytrzymywał przycisk myszy, ponieważ upuszczanie myszy było wyrzucane.

Rozwiązałem ten problem, usuwając moduł obsługi myszy po jego uruchomieniu, jak poniżej:

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

Mam nadzieję, że to pomoże ludziom w przyszłości ...


Nie dajesz rozwiązanie samodzielnie wygenerowanego problemu. Jeśli spojrzeć właściwie na odpowiedź, są one wiążące mouseupdla tekstowych pól wejściowych i nie numbers. Ten problem nie powinien zatem nadejść
Om Shankar

Problem z wiązaniem kursora myszy polega na tym, że zakłóca on przesuwanie kursora w polu. Jest to lepsze rozwiązanie, ale jeśli włączysz tabulację w pole, następny ruch zostanie utracony (a użytkownik nie będzie mógł poruszać kursorem za pomocą myszy). To lepsze niż utrata wszystkich zniszczeń!
Colin Breame

3

To zadziała, spróbuj tego -

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

Działa w Safari / IE 9 i Chrome, ale nie miałem okazji przetestować w Firefoksie.


3

Wiem, że jest tu już wiele odpowiedzi - ale jak dotąd tej brakuje; rozwiązanie, które działa również z treściami generowanymi przez ajax:

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

2

Byłem w stanie nieco poprawić odpowiedź Zacha, wprowadzając kilka wywołań funkcji. Problem z tą odpowiedzią polega na tym, że całkowicie wyłącza onMouseUp, uniemożliwiając w ten sposób klikanie w polu tekstowym, gdy jest ono aktywne.

Oto mój kod:

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

To niewielka poprawa w stosunku do odpowiedzi Zacha. Działa idealnie w IE, w ogóle nie działa w Chrome i działa z naprzemiennym sukcesem w FireFox (dosłownie za każdym razem). Jeśli ktoś ma pomysł, jak sprawić, by działał niezawodnie w FF lub Chrome, udostępnij.

W każdym razie pomyślałem, że podzielę się, co w mojej mocy, aby uczynić to trochę przyjemniejszym.


W kodzie występuje błąd - druga metoda powinna mieć nazwę „TextBoxMouseUp”. Spójrz na moją odpowiedź, która wykorzystuje podobne podejście.
Colin Breame

1
Należy zauważyć, że onMouseUp=""i onMouseDown=""nie są poprawne standardowy w3. Powinny być onmouseup=""i onmousedown="". Podobnie jak w przypadku innych atrybutów HTML, powinny być pisane małymi literami, a nie wielbłądami.
DrewT,

2

Podobnie jak @Travis i @Mari, chciałem dokonać automatycznego wyboru po kliknięciu przez użytkownika, co oznacza zapobieganie domyślnemu zachowaniu mouseupzdarzenia, ale nie uniemożliwia użytkownikowi klikania. Rozwiązanie, które wymyśliłem, które działa w IE11, Chrome 45, Opera 32 i Firefox 29 (są to przeglądarki, które obecnie zainstalowałem), opiera się na sekwencji zdarzeń związanych z kliknięciem myszy.

Po kliknięciu wpisu tekstowego, który nie jest aktywny, otrzymujesz następujące zdarzenia (między innymi):

  • mousedown: W odpowiedzi na twoje kliknięcie. Domyślne podwyżki obsługifocus razie potrzeby i rozpoczyna się wybór selekcji.
  • focus: W ramach domyślnej obsługi mousedown.
  • mouseup: Zakończenie kliknięcia, którego domyślna obsługa ustawi koniec wyboru.

Po kliknięciu wprowadzonego tekstu, który jest już aktywny, focuszdarzenie jest pomijane. Jak zauważyli zarówno @Travis, jak i @Mari, mouseupnależy zapobiegać domyślnej obsłudze tylko w focusprzypadku wystąpienia zdarzenia. Ponieważ jednak nie ma „focus jednak nie ma zdarzenia „nie zdarzyło się”, musimy wywnioskować to, co możemy zrobić w mousedownmodule obsługi.

Rozwiązanie @ Mari wymaga zaimportowania jQuery, czego chcę uniknąć. Rozwiązanie @ Travisa robi to poprzez kontrolę document.activeElement. Nie wiem, dlaczego dokładnie jego rozwiązanie nie działa w różnych przeglądarkach, ale istnieje inny sposób, aby sprawdzić, czy wprowadzanie tekstu ma fokus: po prostu podążaj za jegofocus iblur zdarzenia zdarzenia.

Oto kod, który działa dla mnie:

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

Mam nadzieję, że to komuś pomoże. :-)


+1 Dzięki, ale jak można to napisać ponownie, abyś nie zakodował na stałe kontrolki „txtCustomer” w skrypcie? Czy istnieje sposób na przekazanie „tego” obiektu?
Fandango68,

Jednym ze sposobów byłoby utworzenie funkcji narzędziowej, aby zastosować zachowanie do dowolnego elementu przekazanego jako parametr. W ramach tej funkcji odwołanie do elementu byłoby zakodowane na stałe - do parametru. Następnie możesz wywołać go na dowolnej liczbie elementów wejściowych, zidentyfikowanych za pomocą wszelkich dostępnych środków. :-)
Jonathan Gilbert,

Przepraszam, jestem noobem. Czy możesz zaktualizować swoją odpowiedź o przykład? Dzięki
Fandango68,

1
Wystarczy owinąć kod, który napisałem w deklaracji funkcji, która przyjmuje parametr o nazwie „txtCustomer”. Polecam zmianę nazwy „txtCustomer” na coś innego, ale jeśli nie masz pewności co do tego, technicznie będzie działać ze zmienną o nazwie „txtCustomer”. To znaczy: function MakeTextBoxAutoSelect (txtCustomer) { to, co napisałem powyżej }
Jonathan Gilbert


1

Jakie jest rozwiązanie JavaScript lub jQuery, które zaznacza całą zawartość pola tekstowego, gdy pole tekstowe zostanie aktywowane ?

Musisz tylko dodać następujący atrybut:

onfocus="this.select()"

Na przykład:

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

(Szczerze mówiąc, nie mam pojęcia, dlaczego potrzebowałbyś czegoś innego.)


1

To zadziałało dla mnie (publikowanie, ponieważ nie ma go w odpowiedziach, ale w komentarzu)

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

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

Edycja: Na prośbę @ DavidG nie mogę podać szczegółów, ponieważ nie jestem pewien, dlaczego to działa, ale uważam, że ma to coś wspólnego ze zdarzeniem fokusowym propagującym się w górę lub w dół lub czymkolwiek innym i elementem wejściowym otrzymującym powiadomienie otrzymano fokus. Ustawienie limitu czasu daje elementowi chwilę na uświadomienie sobie, że tak się stało.


Proszę wyjaśnić swoją odpowiedź, a nie tylko wkleić kod.
DavidG

0

Jeśli połączysz wydarzenia razem, uważam, że eliminuje to potrzebę użycia, .onejak sugerowano gdzie indziej w tym wątku.

Przykład:

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

0

Uwaga: Jeśli programujesz w ASP.NET, możesz uruchomić skrypt za pomocą ScriptManager.RegisterStartupScript w C #:

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

Lub po prostu wpisz skrypt na stronie HTML sugerowanej w innych odpowiedziach.


Pytanie nie ma nigdzie ASP.NET. : |
Mohamed Thaufeeq

To prawda, że ​​opublikowałem to na wypadek, gdyby programista używał ASP.NET. Może to być pomocne dla kogoś, kto szuka odpowiedzi za pomocą frameworka (ponieważ pomogło mi to). Po prostu dzielę się i mam nadzieję, że ktoś uzna to za pomocne.
Exel Gamboa

Na wypadek, gdyby programista używał ASP.NET, do pytania doda tag „asp.net”. : |
Mohamed Thaufeeq

0

Sieję to gdzieś, działa idealnie!

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

0

Jestem trochę spóźniony na imprezę, ale działa to doskonale w IE11, Chrome, Firefox, bez pomieszania myszy (i bez 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);
        });
    }
});

Tak ale jeśli focusprzez tabulatorem do pola, znajdziesz wiele detektory zdarzeń mouseUp mocowania ...
Sebastian Scholle

-1

Moje rozwiązanie jest następne:

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

Tak więc najechanie myszką zwykle działa, ale nie spowoduje odznaczenia po uzyskaniu fokusa przez wejście

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.