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.
Odpowiedzi:
Spróbuj użyć
click
zamiastfocus
. Wygląda na to, że działa zarówno w przypadku myszy, jak i kluczowych zdarzeń (przynajmniej w Chrome / Mac):jQuery <wersja 1.7:
jQuery wersja 1.7+:
Oto demo
źródło
Myślę, że tak się dzieje:
Obejściem może być asynchroniczne wywoływanie funkcji select (), dzięki czemu działa ona całkowicie po focus ():
źródło
this
jest nieco nieoczekiwana w takich zakresach. Zaktualizuję kod.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.
http://jsfiddle.net/25Mab/9/
źródło
select()
Wydaje się, że usunięcie drugiego działa.$('input[autofocus]').select();
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
źródło
Po dokładnej analizie proponuję to jako znacznie czystsze rozwiązanie w tym wątku:
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:
Niektóre przeglądarki próbują ustawić kursor podczas
mouseup
click
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ą,focus
są 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
focus
module obsługi zdarzeń, możemy szybko dołączyć detektory zdarzeńclick
(kliknięcie) ikeyup
(tab in), które mają zostać uruchomione.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.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
mouseup
i,keyup
aby.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ń :Następnie możesz uprościć kod w następujący sposób:
Demo w skrzypcach
źródło
click
zdarzeniu, które jest dalej niż w potokumouseup
. Ponieważ chcemy obsłużyć koniec zaznaczenia tak późno, jak to możliwe, aby dać nam największą szansę na przesłonięcie przeglądarki, użycie kliknięcia zamiast myszy powinno załatwić sprawę. Testowane w FF, Chrome i IE.one
nie będzie go wycinać, ponieważ „Program obsługi jest wykonywany raz na element dla każdego typu zdarzenia . Automatycznie wyłączy zdarzenie, które je uruchomiło, ale drugi nadal pozostanie w pobliżu i i takoff
zajmie się nimi. Zobacz moje pytanie: funkcja, która uruchomi się dokładnie raz dla dowolnej liczby zdarzeńSpowoduje to wykonanie pracy i uniknięcie problemu polegającego na tym, że nie można już zaznaczać części tekstu za pomocą myszy.
źródło
Ta wersja działa na iOS, a także naprawia standardowe przeciąganie, aby wybrać na Windows Chrome
http://jsfiddle.net/Zx2sc/2/
źródło
Problem z większością tych rozwiązań polega na tym, że nie działają one poprawnie podczas zmiany pozycji kursora w polu wprowadzania.
onmouseup
Zdarzenie zmienia położenia kursora w tej dziedzinie, który jest zwolniony poonfocus
(przynajmniej w Chrome i FF). Jeśli bezwarunkowo odrzucisz,mouseup
użytkownik nie będzie mógł zmienić pozycji kursora za pomocą myszy.Kod warunkowo uniemożliwi
mouseup
zachowanie domyślne, jeśli pole nie jest aktualnie aktywne. Działa w tych przypadkach:Testowałem to w Chrome 31, FF 26 i IE 11.
źródło
Znalazłem świetne rozwiązanie, czytając ten wątek
źródło
Pochodzę z końca 2016 roku i ten kod działa tylko w najnowszych wersjach jquery (w tym przypadku jquery-2.1.3.js).
źródło
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ę.
źródło
$("input[type=text]").on('click', function () { $(this).focus.select(); })
powoduje, że fokus i wybór mają miejsce, gdy użytkownik kliknie pole, ponieważ jest on wykonywany, gdy użytkownik kliknie pole. Bez modułu obsługi zdarzeń kod nie odpowiada na pytanie, stąd opinia i komentarz. Zasadniczo masz część „cały bieżący tekst jest zaznaczony”, ale nie część „kiedy wybiera pole”.Użyj clearTimeout dla większego bezpieczeństwa, jeśli szybko przełączasz się między dwoma wejściami. ClearTimeout wyczyść stary limit czasu ...
źródło
Działa świetnie z natywnym JavaScript
select()
.lub ogólnie:
źródło
Lub możesz po prostu użyć
<input onclick="select()">
Works perfect.źródło
Możesz użyć prostego kodu:
źródło
źródło
$.ready
jest nieprawidłowe Musisz przekazać mu funkcję, aby opóźniała doattr
momentu, gdy dokument będzie gotowy. Robisz to natychmiast, a następnie przekazujesz kolekcję elementów do$.ready
.addEventListener
.Zawsze używam
requestAnimationFrame()
do przeskakiwania wewnętrznych mechanizmów po zdarzeniu i działa to doskonale w Firefoksie. Nie testowałem w Chrome.źródło