Przekierowanie wejścia iOS Safari 8

Question

Mam problem z polami formularzy w mobilnym Safari, wersja 8.1. Wygląda na to, że jest to błąd związany ze wszystkimi wersjami Safari 8 na urządzeniach mobilnych.

Podczas wpisywania tekstu na dane wejściowe i że tekst jest dłuższy niż samo wejście, kursor przesuwa się w prawo podczas pisania - jest to poprawne. Problem polega na tym, że gdy przytrzymasz, aby wybrać i spróbować przejść w lewo do ukrytego tekstu, nie możesz przewijać. Podobnie, jeśli wybierzesz poza wprowadzeniem, nie możesz przewinąć w prawo, aby wyświetlić ukryty tekst.

Jedynym wyborem jest wybranie wszystkich i usunięcie.

Jakiekolwiek obejście tego problemu? Przesłałem przykładową stronę z różnymi typami danych wejściowych, zachowanie występuje we wszystkich z nich.

Fiddle: http://jsfiddle.net/b7kmxaL6/ (wizyta w Mobile Safari)

<form action=""> 
    <fieldset> 
     <input type="text" class="text"> 
     <input type="email" class="email"> 
     <input type="password" class="password"> 
    </fieldset> 
</form> 

Answer 1

widzę ten sam problem w aplikacji sieci web mam kodowania dla urządzeń mobilnych.

Jeśli jednak dodasz stronę internetową do ekranu głównego i uruchomisz ją z <meta name="apple-mobile-web-app-capable" content="yes"> w głowie, problem nie zostanie wyświetlony: możesz teraz przewijać tekst wprowadzany, przesuwając karetkę w lewo lub w prawo na krawędzi pole wejściowe.

Answer 2

Oto kod, który trochę pomoże. Zaznaczanie tekstu nie działa tak dobrze, jeśli wybierasz fragment większy niż rozmiar <input type=text>. Przetestowano na iPadzie z iOS 10.2 w Safari i Chrome.

var interval; 

$('#inputid').focus(function() { 
     var el=this,ratio=el.scrollWidth/el.value.length; 
     var inputwidthinchar=$(el).width()/ratio; 

     clearInterval(interval); 
     interval=setInterval(function(){ 
       var x=el.selectionStart,x2=el.selectionEnd,width=$(el).width(); 
       if ((width + 1) > el.scrollWidth) return; 
       var curposS=x-el.scrollLeft/ratio, 
        curposE=x2-el.scrollLeft/ratio, 
        tenper=inputwidthinchar*.1; 
       if (curposS > tenper && curposE < (inputwidthinchar-tenper)) return; // only if at edges; 
       if (curposS < tenper && curposE > (inputwidthinchar-tenper)) return; // if at both edges, don't do anything; 
       //center text - good for tapping on spot to be centered 
       //$(el).scrollLeft(x*ratio-(width/2)); 

       //scroll two char at a time - good for touch and hold at edge and more like expected function 
       if (curposS < tenper) 
         $(el).scrollLeft(el.scrollLeft-ratio*2); 
       else 
         $(el).scrollLeft(el.scrollLeft+ratio*2); 

       el.setSelectionRange(x, x2); //not working so well. 
     },100); 
}).blur(function(){ 
     clearInterval(interval); 
});