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

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

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

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.

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

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

Działa to również na iOS:

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

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

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>

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

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.

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

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.

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

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

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

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

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

$('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.

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

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.

Sieję to gdzieś, działa idealnie!

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

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

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