Pytanie Programowe zaznaczanie tekstu w polu wejściowym na urządzeniach z systemem iOS (mobilny Safari)


W jaki sposób programowo wybrać tekst pola wejściowego na urządzeniach z systemem iOS, np. iPhone, iPad z mobilnym Safari?

Normalnie wystarczy wywołać .select() funkcja na <input ... /> element, ale to nie działa na tych urządzeniach. Kursor zostanie po prostu pozostawiony na końcu istniejącego wpisu bez dokonania wyboru.


76
2017-07-17 15:24


pochodzenie


i fokus (). select ()? - mplungjan
Nie widzę żadnego powodu, dla którego bycie urządzeniem dotykowym zmienia trafność preselekcji tekstu. To, co powiedziałeś o urządzeniu dotykowym, równie dobrze można powiedzieć o urządzeniu bezdotykowym. Chcę wstępnie wybrać tekst, gdy użytkownik zdecyduje się dotknąć elementu, aby go edytować. W większości przypadków użytkownik prawdopodobnie będzie chciał zastąpić istniejącą zawartość, w którym to przypadku byłby w stanie to zrobić bez dalszego dotykania i przeciągania. W innych przypadkach, gdy chcą edytować istniejącą treść, będą mogli odznaczyć lub zmienić wybór. - sroebuck
Niestety .focus (). Select () nie działa. - sroebuck
Zaczynam nagrodę za ten problem. Moim celem jest ułatwienie użytkownikom kliknięcia w moje pole tekstowe i kliknięcie "Kopiuj", aby skopiować tekst do schowka. - Dan Fabulich
To samo tutaj ... wydaje się, że wiele metod nie działa w Mobile Safari. Selekcja () i .focus () to dwie z nich.


Odpowiedzi:


setSelectionRange(0, 9999);

https://developer.mozilla.org/en/DOM/Input.select


85
2018-06-10 05:54



To działa, dziękuję! - jrummell
To działało dla mnie, ale musiało polegać na zatrzymywaniu mouseup na tych samych wejściach. - DuStorm
Nie działa to dla mnie na iPadzie ani iPhonie - Doug
To zadziałało tylko dla mnie, gdy uruchomiłem .focus() na wejściu przed wywołaniem input.setSelectionRange. Jeśli słuchasz muzyki focus zdarzenie na wejściu, pamiętaj, aby uwzględnić nieskończoną pętlę. - allieferr
Muszę wspomnieć: to nie zadziała na textareas jeśli mają readonly zestaw atrybutów. - JayPea


Nic w tym wątku nie działa dla mnie, oto co działa na moim iPadzie:

// t is the input field
setTimeout(function() {
    t.setSelectionRange(0, 9999);
}, 1);

25
2017-09-15 19:43



to zrobić sztuczkę f ** kin! Dziękuję Ci! działa ze zdarzeniem "kliknij" - saike


Zobacz to skrzypce: (wprowadź jakiś tekst w polu wprowadzania i kliknij "wybierz tekst")

To zaznaczanie tekstu w polu wejściowym na moim iPodzie (5. gen iOS6.0.1), otwieranie klawiatury, a także wyświetlanie menu Wytnij / Kopiuj / Zaproponuj ...

Używanie zwykłego javascript. Nie próbowałem tego z jQuery

document.getElementById("p1").selectionStart = 0
document.getElementById("p1").selectionEnd = 999

Zauważ, że liczba 999 to tylko próbka. Powinieneś ustawić te liczby na liczbę znaków, które chcesz wybrać.

AKTUALIZACJA:

  • iPod5 - iOS6.0.1 - Działa dobrze.
  • iPad1 - iOS5.1.1 - Wybrano tylko tekst. Stuknij raz, aby otworzyć menu Wytnij / Kopiuj
  • iPad2 - iOS4.3.3 - Wybrano tylko tekst. Stuknij raz, aby otworzyć menu Wytnij / Kopiuj

W przypadku dwóch ostatnich możesz eksperymentować, uruchamiając zdarzenie kliknięcia w input element

AKTUALIZACJA: (07-10-2013)

  • iPod5 - iOS7.0.2 - Używanie skrzypiec w łączu: Nie widać wpisanego tekstu w polu wprowadzania.                   Naciśnięcie przycisku przekierowuje mnie na facebook.com (??? wtf ???)                   nie mam pojęcia, co tam się dzieje.

AKTUALIZACJA: (14-11-2013)

  • iOS 7.0.3: Dzięki komentarzowi od binki zaktualizuj, że                    .selectionStart i .selectionEnd  robi praca.

AKTUALIZACJA: (15-01-2015)

  • iOS 8.x.x: Dzięki komentarzowi od Michael Siebert. Zaczerpnięte z komentarza:                   Musiałem słuchać zarówno zdarzeń skupienia i kliknij, a następnie setTimeout / _. Debounce                   aby działał w obu przypadkach: kliknij wejście lub ustaw ostrość za pomocą zakładki

23
2017-12-07 10:26



Jesteś moim bohaterem na dzisiaj! Działa jak marzenie! ;-) - andi1984
@ andi1984 Gdzie mogę odebrać odznakę bohatera? - bart s
Czy wiesz o kompatybilności z innymi wersjami iOS? Czy to działa na iOS5 i iOS4? - andi1984
Działa dla mnie na iOS6, ALE a) nie działa na komputerach z Chrome, b) nie działa po wyłączeniu wprowadzania tekstu :( Mój przypadek użycia: generuję unikalny URL i chcę udostępniać urządzenie. - Michael Freeman
@barts Mam zamiar zgadnąć, że trafiłeś na Facebooka, ponieważ menu "Udostępnij" w jsfiddle musi być pomieszane i niedopuszczalne, a być może niewidoczne. Skończyło się na tym, że kliknąłem niewidoczny przycisk na Twitterze podczas testów z iOS-7.0.3 na iPadzie. Odkryłem też, że kiedy pomyślałem, że pukam w twoje <input/>, iPad myślał, że stukałem w okienko "CSS" jsfiddle (w którym wszystko, co wpisałem, było niewidoczne). Raz dostałem mój kran skierowany na poprawne <input/>Twój przycisk "wybierz tekst" działa doskonale na iOS-7.0.3 :-). - binki


Trudno udowodnić, że coś jest negatywne, ale moje badania sugerują, że jest to błąd w Mobile Safari.

Zwróć uwagę, że fokus () działa mniej więcej - chociaż może wymagać więcej niż jednego dotknięcia, aby odnieść sukces, i nie jest konieczne, jeśli próbujesz odpowiedzieć użytkownikowi dotknięciem danego pola, ponieważ samo dotknięcie spowoduje wyświetlenie pola skupiać. Niestety, wybierz () jest po prostu nie działa w Mobile Safari.

Najlepszym rozwiązaniem może być zgłoszenie błędu jabłko.


22
2017-08-30 09:39



Nasze testy wskazują na to samo. To błąd / brakująca funkcja w mobilnym safari. - Nir Levy
FWIW, działa w Chrome Desktop i przeglądarce Android, które są również oparte na WebKit. - jrummell


Niestety, we wcześniejszym poście nie zauważyłem, że JavaScript oznacza, że ​​chciałeś uzyskać odpowiedź w JavaScript.

Aby dostać to, czego chcesz UIWebView z javascriptUdało mi się zebrać razem dwie ważne informacje, aby je uruchomić. Nie jestem pewien co do przeglądarki mobilnej.

  1. element.setSelectionRange(0,9999); robi to, co chcemy

  2. Zdarzenie mouseUp powoduje cofnięcie wyboru

Tak (używając prototypu):     

    input.observe ('focus', function () {
      this.setSelectionRange (0, 9999);
    });
    input.observe ('mouseup', funkcja (zdarzenie) {
      event.stop ();
    });

Zrób sztuczkę.

Matt


7
2017-07-25 08:03



Mamy ten sam problem i stwierdziliśmy, że Twoje rozwiązanie działa, ale używamy jquery (w rzeczywistości telefon komórkowy). / * wybierz tekst wewnątrz wypełnień * / $ ("input") focus (function () {this.setSelectionRange (0, 9999); return false;}) .mouseup (function () {return false;} ); - DuStorm
Używam iOS 8 na iPadzie i iPhonie, a kod z @DuStorm (komentarz powyżej tego) jest jedyną rzeczą, która sprawdziła się we wszystkich odpowiedziach tutaj podanych. Aby powtórzyć, co najmniej działa na iOS 8 w Chrome i Safari: $("input").focus(function () { this.setSelectionRange(0, 9999); return false; } ).mouseup( function () { return false; }); - Aaron Jessen
Musiałem użyć focusin zamiast skupić się na tym, aby to zadziałało, iOS 7 - Lucas


Wygląda na to, że fokus będzie działał, ale tylko wtedy, gdy zostanie wywołany bezpośrednio ze zdarzenia natywnego. wywoływanie fokusa za pomocą czegoś takiego jak SetTimeout nie pojawia się, wywołaj klawiaturę. Sterowanie klawiaturą ios jest bardzo słabe. To nie jest dobra sytuacja.


3
2018-03-22 03:02





Coś podobnego do mnie działa dla mnie na Webkicie dostarczanym z Androidem 2.2:

function trySelect(el) {
    setTimeout(function() {
        try {
            el.select();
        } catch (e) {
        }
    }, 0);
}

Zobacz Chromium Problem 32865.


1
2018-01-20 04:14





Dzięki iOS 7 na iPadzie jedynym sposobem, w jaki mogłem wykonać tę pracę, było użycie w rzeczywistości <textarea></textarea> zamiast <input> pole.

na przykład

<textarea onclick="this.setSelectionRange(0, 9999);">My text will be selected when textarea is clicked.</textarea>

Jak uniemożliwić użytkownikowi zmianę tekstu wewnątrz obszaru było trudniejsze, ponieważ tworzysz tekst tylko raz, sztuczka wyboru nie będzie już działać.


1
2018-02-05 16:01