html - style - Desviación de la entrada de iOS 8 Safari desbordamiento

html title attribute

Question

Tengo un problema con los campos de formulario en Mobile Safari, versión 8.1. Esto parece ser un error con todas las versiones de Safari 8 en el móvil.

Cuando escribe texto en una entrada y ese texto es más largo que la entrada en sí, el cursor sigue moviéndose hacia la derecha a medida que escribe, esto es correcto. El problema es que cuando mantienes presionado para seleccionar e intentas moverte a la izquierda al texto que está oculto, no puedes desplazarte. Del mismo modo, si selecciona fuera de la entrada, no puede desplazarse hacia la derecha para ver el texto oculto.

Tu única opción es seleccionar todo y borrar.

¿Alguna solución a este problema? He cargado una página de muestra con diferentes tipos de entrada, el comportamiento existe en todos ellos.

Fiddle: http://jsfiddle.net/b7kmxaL6/ (Visita en safari móvil)

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

Answer 1

Aquí hay un código que ayudará un poco. La selección de texto no funciona tan bien si selecciona una parte más grande que el tamaño de <input type=text> . Probado en iPad con iOS 10.2 en Safari y 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);
});

Answer 2

Estoy viendo el mismo problema en una aplicación web que estoy codificando para dispositivos móviles.

Sin embargo, si agrega el sitio web a su pantalla de inicio y lo ejecuta con <meta name="apple-mobile-web-app-capable" content="yes"> , el problema no se muestra: ahora puede desplazarse a través del texto de entrada moviendo el cursor hacia la izquierda o hacia la derecha en el borde del campo de entrada.