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

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.

input.setSelectionRange(0, 9999);

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

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

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 .

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

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

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.

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 .

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

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.

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