Programowe zaznaczanie tekstu w polu wprowadzania na urządzeniach z systemem iOS (mobilna przeglądarka Safari)


87

Jak programowo zaznaczyć tekst w polu wprowadzania na urządzeniach z systemem iOS, np. IPhone, iPad z mobilną przeglądarką Safari?

Zwykle wystarczy wywołać .select()funkcję na <input ... />elemencie, ale to nie działa na tych urządzeniach. Kursor jest po prostu pozostawiony na końcu istniejącego wpisu bez dokonanego wyboru.


10
Nie widzę żadnego powodu, dla którego bycie urządzeniem dotykowym zmienia znaczenie wstępnie zaznaczonego tekstu. To, co powiedziałeś o urządzeniu dotykowym, można równie dobrze powiedzieć o urządzeniu bezdotykowym. Chcę wstępnie zaznaczyć tekst, gdy użytkownik zdecyduje się dotknąć elementu, aby go edytować. W większości przypadków użytkownik prawdopodobnie zechce zastąpić istniejącą zawartość, w którym to przypadku mógłby to zrobić bez dalszego dotykania i przeciągania. W innych przypadkach, gdy chcą edytować istniejącą zawartość, mogliby odznaczyć lub zmienić zaznaczenie.
sroebuck,

2
Niestety .focus (). Select () nie działa.
sroebuck

2
Zaczynam nagrodę w tej sprawie. Moim celem jest ułatwienie użytkownikom klikania mojego obszaru tekstowego i wybierania opcji „Kopiuj”, aby skopiować tekst do schowka.
Dan Fabulich

To samo tutaj… wydaje się, że wiele metod nie działa w Mobile Safari. .Select () i .focus () to dwie z nich.

@sroebuck fajna odpowiedź dla Davida W. Keitha! kciuki w górę!
eyurdakul

Odpowiedzi:


95
input.setSelectionRange(0, 9999);

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


3
To działało dla mnie, ale musiało obejmować zatrzymanie myszy na tych samych wejściach.
DuStorm

8
To nie działa dla mnie ani na iPadzie, ani na iPhonie
Doug,

4
To działało dla mnie tylko wtedy, gdy wyzwoliłem .focus()na wejściu przed wywołaniem input.setSelectionRange. Jeśli nasłuchujesz focuszdarzenia na wejściu, pamiętaj o uwzględnieniu nieskończonej pętli.
allieferr

10
Gotcha, o którym warto wspomnieć: to nie będzie działać na obszarach tekstowych, jeśli mają readonlyustawiony atrybut.
JayPea

5
Spędziłem ponad godzinę bawiąc się różnymi rozwiązaniami. Wywołanie setSelectionRange()w focusmodule obsługi działa, gdy wyzwalasz .focus()programowo, ale po ręcznym dotknięciu wprowadzania tekstu w systemie iOS zaznaczenie nie nastąpi. Wystarczy powiedzieć, że wszystko, co musisz zrobić, to wywołać setSelectionRange()w ramach setTimeout 0 i działa zgodnie z oczekiwaniami bez względu na to, co wyzwala fokus.

30

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

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

to zrób pieprzoną sztuczkę! Dziękuję Ci! współpracuje z wydarzeniem „click”
saike

Dziękuję bardzo !!
Vaclav Kusak

26

Trudno udowodnić coś negatywnego, 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 to konieczne, jeśli próbujesz odpowiedzieć użytkownikowi, dotknij pola, o którym mowa, ponieważ samo dotknięcie da pole skupiać. Niestety, select () jest po prostu niefunkcjonalne w Mobile Safari.

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


1
Nasze testy wskazują na to samo. To błąd / brakująca funkcja w mobilnym safari.
Nir Levy

2
FWIW, działa na pulpicie Chrome i przeglądarce Android, które również są oparte na WebKit.
jrummell

24

Zobacz to skrzypce : (wprowadź tekst w polu wprowadzania i kliknij „wybierz tekst”)

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

Używając 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 zaznaczyć.

AKTUALIZACJA:

  • iPod5 - iOS6.0.1 - Działa poprawnie.
  • iPad1 - iOS5.1.1 - zaznaczono tylko tekst. Dotknij raz wyboru, aby otworzyć menu Wytnij / Kopiuj
  • iPad2 - iOS4.3.3 - zaznaczono tylko tekst. Stuknij zaznaczenie raz, aby otworzyć menu Wytnij / Kopiuj

W przypadku dwóch ostatnich możesz poeksperymentować, wywołując zdarzenie kliknięcia inputelementu

AKTUALIZACJA: (07-10-2013)

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

AKTUALIZACJA: (14-11-2013)

  • iOS 7.0.3: Dzięki Komentarz Binki aktualizacji, że .selectionStarti .selectionEnd czyni pracę.

AKTUALIZACJA: (15-01-2015)

  • iOS 8.xx: Dzięki komentarzowi Michaela Sieberta . Zaczerpnięte z komentarza: musiałem nasłuchiwać zarówno zdarzeń skupienia, jak i kliknięcia, a następnie ustawićTimeout / _. Debounce, aby zadziałało w obu przypadkach: kliknij wejście lub zaznacz za pomocą tabulacji

Jesteś dziś moim bohaterem! Działa jak marzenie! ;-)
andi1984

3
@ andi1984 gdzie mogę odebrać odznakę bohatera?
Bart

1
Czy wiesz o kompatybilności z innymi wersjami iOS? Czy to działa na iOS5 i iOS4?
andi1984

1
Działa u mnie na iOS6, ALE a) nie działa na komputerowej przeglądarce Chrome b) nie działa, gdy wprowadzanie tekstu jest wyłączone :( Mój przypadek użycia: generuję unikalny adres URL i chcę ułatwić udostępnianie.
Mars Robertson

1
@barts Zgaduję, że trafiłeś na Facebooka, ponieważ menu „Udostępnij” w jsfiddle musi być pomieszane i być może niewidoczne. Skończyło się na tym, że sam kliknąłem niewidoczny przycisk Twittera podczas testowania z iOS-7.0.3 na iPadzie. Odkryłem również, że kiedy myślałem <input/>, że pukam w twój , iPad myślał, że pukam w okienku „CSS” jsfiddle (gdzie wszystko, co wpisałem, było niewidoczne). Gdy dotknąłem właściwego miejsca <input/>, przycisk „zaznacz tekst” działa doskonale na iOS-7.0.3 :-).
binki

7

Przepraszam, w moim poprzednim poście nie zauważyłem kodu JavaScript sugerującego, że chcesz otrzymać odpowiedź w JavaScript.

Aby uzyskać to, czego chcesz w UIWebView z javascript , udało mi się zeskrobać dwie ważne informacje, aby to zadziałało. Nie jestem pewien co do przeglądarki mobilnej.

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

  2. Zdarzenie mouseUp cofa wybór

Zatem (używając Prototype):

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

Zrób sztuczkę.

Matt


3
Mamy ten sam problem i stwierdziliśmy, że Twoje rozwiązanie działa - ale używamy jquery (w rzeczywistości mobilnej). / * wybierz tekst wewnątrz wypełnień * / $ ("input"). focus (function () {this.setSelectionRange (0, 9999); return false;}) .mouseup (function () {return false;} );
DuStorm

1
Używam iOS 8 na iPadzie i iPhonie, a kod z @DuStorm (komentarz nad tym) jest jedyną rzeczą, która zadziałała dla mnie ze wszystkich udzielonych tutaj odpowiedzi. Powtarzam, 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ć focusinzamiast skupić się, aby to zadziałało, iOS 7
Lucas

3

Wygląda na to, że fokus będzie działał, ale tylko wtedy, gdy zostanie wywołany bezpośrednio z wydarzenia natywnego. wywołanie fokusa przy użyciu czegoś takiego jak SetTimeout nie pojawia się przywołaj klawiaturę. Sterowanie klawiaturą ios jest bardzo słabe. To nie jest dobra sytuacja.


1

Coś podobnego do poniższego działa dla mnie w przypadku Webkita dostarczanego z Androidem 2.2:

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

Zobacz wydanie Chromium 32865 .


1

Z iOS 7 na iPadzie jedynym sposobem, w jaki mogłem wykonać tę pracę, było użycie faktycznie <textarea></textarea>zamiast <input>pola.

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 w obszarze, było trudniejsze, ponieważ jeśli ustawisz tekst tylko do odczytu, sztuczka z zaznaczaniem nie będzie już działać.


1

Poszukałem tego rozwiązania, a wszystkie Twoje odpowiedzi pomogły mi otworzyć kolejną puszkę robaków.

Klient chciał, aby użytkownik mógł kliknąć i zaznaczyć wszystko , a także pozwolić użytkownikowi „zakładkę” i zaznaczyć wszystko na iPadzie (z zewnętrzną klawiaturą. Wiem, szaleństwo ...)

Moim rozwiązaniem tego problemu było przestawienie wydarzeń. Najpierw ustaw ostrość , następnie kliknij , a następnie dotknij Start .

$('#myFUBARid').on('focus click touchstart', function(e){
  $(this).get(0).setSelectionRange(0,9999);
  //$(this).css("color", "blue");
  e.preventDefault();
});

Mam nadzieję, że to komuś pomoże, ponieważ pomogliście mi niezliczoną ilość razy.


-4

Jeśli korzystasz z przeglądarek zgodnych z HTML5, możesz użyć placeholder="xxx"w swoim inputtagu. To powinno wystarczyć.


8
Nie sądzę, aby o to chodziło w pytaniu
caitriona
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.