jquery input zaznacz wszystko na fokus

Używam tego kodu, aby spróbować zaznaczyć cały tekst w polu, gdy użytkownik skupia się na polu. Co się dzieje, zaznacza wszystko na sekundę, a następnie jest niezaznaczone, a kursor pisania zostaje w miejscu, w którym kliknąłem ...

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

Chcę, żeby wszystko pozostało wybrane.

Spróbuj użyć clickzamiast focus. Wygląda na to, że działa zarówno w przypadku myszy, jak i kluczowych zdarzeń (przynajmniej w Chrome / Mac):

jQuery <wersja 1.7:

$("input[type='text']").click(function () {
   $(this).select();
});

jQuery wersja 1.7+:

$("input[type='text']").on("click", function () {
   $(this).select();
});

Oto demo

Myślę, że tak się dzieje:

focus()
   UI tasks related to pre-focus
   callbacks
       select()
   UI tasks related to focus (which unselect again)

Obejściem może być asynchroniczne wywoływanie funkcji select (), dzięki czemu działa ona całkowicie po focus ():

$("input[type=text]").focus(function() { 
    var save_this = $(this);
    window.setTimeout (function(){ 
       save_this.select(); 
    },100);
});

Myślę, że to lepsze rozwiązanie. W przeciwieństwie do zwykłego zaznaczania w zdarzeniu onclick, nie przeszkadza to zaznaczaniu / edytowaniu tekstu za pomocą myszy. Działa z większymi silnikami renderującymi, w tym IE8.

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

http://jsfiddle.net/25Mab/9/

Istnieje kilka przyzwoitych odpowiedzi, a @ user2072367 jest moją ulubioną, ale ma nieoczekiwany wynik, gdy skupiasz się za pomocą karty zamiast kliknięcia. (nieoczekiwany wynik: aby zaznaczyć tekst normalnie po fokusie za pomocą karty, należy kliknąć jeden dodatkowy czas)

To skrzypek naprawia ten mały błąd i dodatkowo przechowuje $ (this) w zmiennej, aby uniknąć zbędnego wyboru DOM. Sprawdź to! (:

Testowane w IE> 8

$('input').on('focus', function() {
    var $this = $(this)
        .one('mouseup.mouseupSelect', function() {
            $this.select();
            return false;
        })
        .one('mousedown', function() {
            // compensate for untriggered 'mouseup' caused by focus via tab
            $this.off('mouseup.mouseupSelect');
        })
        .select();
});

Po dokładnej analizie proponuję to jako znacznie czystsze rozwiązanie w tym wątku:

$("input").focus(function(){
    $(this).on("click.a keyup.a", function(e){      
        $(this).off("click.a keyup.a").select();
    });
});

Demo w jsFiddle

Problem:

Oto kilka wyjaśnień:

Najpierw rzućmy okiem na kolejność zdarzeń, gdy klikniesz myszką lub tabulujesz w polu.
Możemy zarejestrować wszystkie odpowiednie zdarzenia w następujący sposób:

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
              function(e) { console.log(e.type); });

Uwaga : Zmieniłem to rozwiązanie tak, aby używało, clicka nie mouseupjak ma to miejsce później w potoku zdarzeń i wydawało się, że powoduje pewne problemy w firefoxie zgodnie z komentarzem @ Jocie

Niektóre przeglądarki próbują ustawić kursor podczas mouseupclick zdarzeń lub . Ma to sens, ponieważ możesz uruchomić kursor w jednej pozycji i przeciągnąć, aby podświetlić jakiś tekst. Nie może oznaczać pozycji karetki, dopóki nie podniesiesz myszy. Funkcje, które obsługują, focussą przeznaczone, aby reagować zbyt wcześnie, pozostawiając przeglądarkę nadpisującą twoje pozycjonowanie.

Ale pocieranie polega na tym, że naprawdę chcemy obsłużyć zdarzenie skupiające. Daje nam znać, kiedy ktoś wszedł na boisko po raz pierwszy. Po tym momencie nie chcemy nadal zastępować zachowań związanych z wyborem użytkownika.

Rozwiązanie:

Zamiast tego, w focusmodule obsługi zdarzeń, możemy szybko dołączyć detektory zdarzeń click(kliknięcie) i keyup(tab in), które mają zostać uruchomione.

Uwaga : Keyup zdarzenia tab będzie faktycznie uruchamiane w nowym polu wejściowym, a nie w poprzednim

Chcemy odpalić wydarzenie tylko raz. Możemy użyć .one("click keyup), ale wywołałoby to obsługę zdarzeń jeden raz dla każdego typu zdarzenia . Zamiast tego, jak tylko naciśniemy przycisk myszy lub przycisk klawiatury, wywołamy naszą funkcję. Pierwszą rzeczą, którą zrobimy, jest usunięcie programów obsługi obu. W ten sposób nie będzie miało znaczenia, czy włożyliśmy tabulator, czy wtargnęliśmy. Funkcja powinna zostać wykonana dokładnie raz.

Uwaga : większość przeglądarek naturalnie zaznacza cały tekst podczas zdarzenia na karcie, ale jak zauważył animatedgif , nadal chcemy obsłużyć to keyupzdarzenie, w przeciwnym mouseuprazie wydarzenie będzie się utrzymywać za każdym razem, gdy będziemy w nim zakładać. Słuchamy obu, abyśmy mogli włączyć od słuchaczy, jak tylko przetworzymy wybór.

Teraz możemy zadzwonić select()po dokonaniu wyboru przeglądarki, więc z pewnością zastąpimy domyślne zachowanie.

Wreszcie, dla dodatkowej ochrony, możemy dodać przestrzenie nazw zdarzeń do funkcji mouseupi, keyupaby .off()metoda nie usuwała żadnych innych detektorów, które mogłyby być w grze.

Testowane w IE 10+, FF 28+ i Chrome 35+

Alternatywnie, jeśli chcesz rozszerzyć jQuery o wywołaną funkcję once, która uruchomi się dokładnie raz dla dowolnej liczby zdarzeń :

$.fn.once = function (events, callback) {
    return this.each(function () {
        var myCallback = function (e) {
            callback.call(this, e);
            $(this).off(events, myCallback);
        };
        $(this).on(events, myCallback);
    });
};

Następnie możesz uprościć kod w następujący sposób:

$("input").focus(function(){
    $(this).once("click keyup", function(e){      
        $(this).select();
    });
});

Demo w skrzypcach

Spowoduje to wykonanie pracy i uniknięcie problemu polegającego na tym, że nie można już zaznaczać części tekstu za pomocą myszy.

$("input[type=text]").click(function() {
    if(!$(this).hasClass("selected")) {
        $(this).select();
        $(this).addClass("selected");
    }
});
$("input[type=text]").blur(function() {
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
});

Ta wersja działa na iOS, a także naprawia standardowe przeciąganie, aby wybrać na Windows Chrome

var srcEvent = null;

$("input[type=text],input[type=number]")

    .mousedown(function (event) {
        srcEvent = event;
    })

    .mouseup(function (event) {
        var delta = Math.abs(event.clientX - srcEvent.clientX) 
                  + Math.abs(event.clientY - srcEvent.clientY);

        var threshold = 2;
        if (delta <= threshold) {
                   try {
                        // ios likes this but windows-chrome does not on number fields
                        $(this)[0].selectionStart = 0;
                        $(this)[0].selectionEnd = 1000;
                    } catch (e) {
                        // windows-chrome likes this
                        $(this).select();
                    }
        }
    });

http://jsfiddle.net/Zx2sc/2/

Problem z większością tych rozwiązań polega na tym, że nie działają one poprawnie podczas zmiany pozycji kursora w polu wprowadzania.

onmouseupZdarzenie zmienia położenia kursora w tej dziedzinie, który jest zwolniony po onfocus(przynajmniej w Chrome i FF). Jeśli bezwarunkowo odrzucisz, mouseupużytkownik nie będzie mógł zmienić pozycji kursora za pomocą myszy.

function selectOnFocus(input) {
    input.each(function (index, elem) {
        var jelem = $(elem);
        var ignoreNextMouseUp = false;

        jelem.mousedown(function () {
            if (document.activeElement !== elem) {
                ignoreNextMouseUp = true;
            }
        });
        jelem.mouseup(function (ev) {
            if (ignoreNextMouseUp) {
                ev.preventDefault();
                ignoreNextMouseUp = false;
            }
        });
        jelem.focus(function () {
            jelem.select();
        });
    });
}
selectOnFocus($("#myInputElement"));

Kod warunkowo uniemożliwi mouseupzachowanie domyślne, jeśli pole nie jest aktualnie aktywne. Działa w tych przypadkach:

• kliknięcie, gdy pole nie jest skupione
• kliknięcie, gdy pole jest aktywne
• tabulacja w pole

Testowałem to w Chrome 31, FF 26 i IE 11.

Znalazłem świetne rozwiązanie, czytając ten wątek

$(function(){

    jQuery.selectText('input:text');
    jQuery.selectText('input:password');

});

jQuery.extend( {
    selectText: function(s) { 
        $(s).live('focus',function() {
            var self = $(this);
            setTimeout(function() {self.select();}, 0);
        });
    }
});

Pochodzę z końca 2016 roku i ten kod działa tylko w najnowszych wersjach jquery (w tym przypadku jquery-2.1.3.js).

if ($(element).is("input")) {
    $(element).focus(function () {
        $(element).select();
    });
}

Używając FF 16.0.2 i jquery 1.8.3, cały kod w odpowiedzi nie działał.
Używam takiego kodu i pracuję.

$("input[type=text]").focus().select();

var timeOutSelect;
$("input[type=text]").focus(function() { 
        var save_this = $(this);
        clearTimeout(timeOutSelect);
        timeOutSelect = window.setTimeout (function(){ 
                save_this.select(); 
        }, 100);
});

Użyj clearTimeout dla większego bezpieczeństwa, jeśli szybko przełączasz się między dwoma wejściami. ClearTimeout wyczyść stary limit czasu ...

Działa świetnie z natywnym JavaScript select().

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

lub ogólnie:

$("input[type=text]")[0].select()

Lub możesz po prostu użyć <input onclick="select()">Works perfect.

Możesz użyć prostego kodu:

$('#idname').select();

<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>

Zawsze używam requestAnimationFrame()do przeskakiwania wewnętrznych mechanizmów po zdarzeniu i działa to doskonale w Firefoksie. Nie testowałem w Chrome.

$("input[type=text]").on('focus', function() {
    requestAnimationFrame(() => $(this).select());
});