iOS Safari 8 Eingabe Überlauf blättern

Question

Ich habe ein Problem mit Formularfeldern auf mobilen Safari, Version 8.1. Dies scheint ein Bug mit allen Versionen von Safari 8 auf dem Handy zu sein.

Wenn Sie Text in eine Eingabe eingeben und dieser Text dann länger ist als die Eingabe selbst, bewegt sich der Cursor während der Eingabe nach rechts - das ist richtig. Das Problem ist, wenn Sie halten, um auszuwählen und zu versuchen, nach links zu dem Text zu gehen, der versteckt ist, können Sie nicht scrollen. Wenn Sie außerhalb der Eingabe auswählen, können Sie nicht nach rechts scrollen, um den verborgenen Text anzuzeigen.

Sie können nur alle auswählen und löschen.

Eine mögliche Lösung für dieses Problem? Ich habe eine Beispielseite mit verschiedenen Eingabetypen hochgeladen, das Verhalten ist in allen vorhanden.

Fiddle: http://jsfiddle.net/b7kmxaL6/ (Besuch in Mobile Safari)

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

Answer 1

ich das gleiche Problem in einem Web-App zu sehen bin ich für mobile Geräte bin Codierung.

Wenn Sie jedoch die Website zu Ihrem Homescreen hinzufügen und sie mit <meta name="apple-mobile-web-app-capable" content="yes"> im Kopf ausführen, wird das Problem nicht angezeigt: Sie können jetzt durch den Eingabetext blättern, indem Sie den Cursor nach links oder rechts am Rand des Mauszeigers bewegen Eingabefeld.

Answer 2

Hier ist ein Code, der ein wenig hilft. Die Auswahl von Text funktioniert nicht so gut, wenn Sie einen Teil auswählen, der größer ist als die Größe des <input type=text>. Getestet auf dem iPad mit iOS 10.2 in Safari und 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); 
});