bootstrap - teclado numerico virtual javascript

en iOS8 con.focus() mostrará el teclado virtual y la página de desplazamiento después del toque

Question

Antes de iOS8, el uso del .focus() Javascript .focus() en un elemento de entrada no parecía tener ningún efecto (el teclado virtual no se mostraría). Después de la última versión de iOS 8, ejecutar el método .focus() parecía no tener ningún efecto en la carga de la página, pero una vez que el usuario tocaba en cualquier lugar de la pantalla, el teclado virtual aparecía instantáneamente y desplazaba la página al elemento en foco. (Esto también es un problema cuando uso el atributo HTML "autofocus")

Este cambio ha causado problemas con los usuarios de iOS8 en mi sitio. Cuando un usuario intenta hacer clic en un botón en mi página, la aparición repentina de desplazamiento y teclado hace que involuntariamente haga clic en un botón que estaba más abajo en la pantalla.

Supongo que este es un error en iOS8 y no fue una función intencional, mi pregunta es ¿cuál es la solución más eficiente para solucionar este problema?

¿Tengo que comprobar navigator.userAgent para ver si el dispositivo es iOS8, cada vez que uso el método .focus() ?

Answer 1

Aquí hay un monopatch condicional para jQuery.focus por lo que no necesita agregar la prueba de userAgent en todas partes.

JavaScript

if (/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
  (function($) {
    return $.fn.focus = function() {
      return arguments[0];
    };
  })(jQuery);
}

CoffeeScript

if /iPad|iPhone|iPod/g.test navigator.userAgent
  (($) ->
    $.fn.focus = ->
      arguments[0]
  )(jQuery)

Nota: $(el).focus().doSomethingElse() arguments[0] para no romper el encadenamiento de métodos como $(el).focus().doSomethingElse()

Answer 2

He registrado un error sobre esto en el Apple Bug Reporter y lo cerraron como duplicado, lo que es una señal de que están trabajando para solucionarlo. Lamentablemente, no me dieron más información sobre el artículo duplicado o sobre el problema en sí. Solo puedo ver el estado del elemento duplicado, que es Abierto.

Answer 3

Para cualquier persona que venga a esto en 2018, hay un complemento que lo soluciona. Simplemente instale este https://github.com/onderceylan/cordova-plugin-wkwebview-inputfocusfix y input.focus() funcionará automáticamente sin ningún trabajo adicional.

Answer 4

Parece que definitivamente estás pegando un error de iOS 8. En iOS7, Safari (aparentemente) ignoraría o mantendría los elementos desenfocados que tenían el foco establecido antes de la carga de la página. Esto incluye tanto <input autofocus> como input.focus() que ocurren hasta cierto punto, posiblemente cargando la página (he probado solo con un script en línea).

En iOS 8, ahora Safari aparentemente recuerda que el elemento se enfocó pero no lo enfocó hasta un evento de aterrizaje. Luego está enviando ciegamente un evento de clic a cualquier elemento que haya recibido el retoque.

Ambos navegadores se comportan igual para input.focus() ocurre después de la carga de la página. Ambos se acercan al elemento y abren el teclado.

Pruebas:

• input.focus() antes de la carga de la página: http://fiddle.jshell.net/qo6ctnLz/3/show/
• <input autofocus> : http://fiddle.jshell.net/qo6ctnLz/4/show/
• input.focus() después de la carga de la página: http://fiddle.jshell.net/qo6ctnLz/6/show/

La buena noticia es que solo debe preocuparse por el nuevo comportamiento en los elementos que desea preenfocar. La otra buena noticia es que, si bien tendrá que usar una solución de agente de usuario, puede usarla para todas las versiones de iOS, ya que ya se comportaban como si no se hubiera enfocado automáticamente.

if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
    element.focus();
}

Este parece ser el enfoque que utiliza http://www.google.com en base a algunas pruebas básicas de usuario-agente:

• Mac Book Pro: autofoco antes de cargar la página.
• iPhone: sin autofocus
• iPad: sin autofocus
• Kit Kat (Android): enfoque después de la carga de la página, posiblemente haciendo una detección extra de la presencia de un teclado de software.

Si no lo has hecho, debes seguir adelante y registrar un radar con Apple en https://bugreport.apple.com .

Answer 5

Parece que en iOS 8 ha habido un cambio de API en el manejo predeterminado para el comando javascript focus (). Si su aplicación es una aplicación híbrida en la que tiene control directo sobre la fachada de la vista web de Apple, a continuación se muestra directamente de Apple Docs.

Un valor booleano que indica si el contenido web puede mostrar el teclado mediante programación.

[myWebView setKeyboardDisplayRequiresUserAction: YES];

Cuando esta propiedad se establece en SÍ, el usuario debe tocar explícitamente los elementos en la vista web para mostrar el teclado (u otra vista de entrada relevante) para ese elemento. Cuando se establece en NO, un evento de enfoque en un elemento hace que la vista de entrada se muestre y se asocie con ese elemento automáticamente.

El valor predeterminado para esta propiedad es SÍ.

Desde el último párrafo, parece que esta llamada a un método no es estrictamente para el teclado. Indica que es para vistas de entrada en general, es decir, menú desplegable, selector de fecha, etc.

Parece que hay un error ya que esta llamada a método no funciona actualmente para mí. El comportamiento actual que estoy recibiendo corresponde como si estuviera en NO.

Answer 6

Si está desarrollando un proyecto de Cordova, puede solucionarlo agregando esta línea

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

a su archivo config.xml Probado en IOS 8.3 e IOS 8.4

Answer 7

Tengo una solución:

1. Deshabilitar todas las entradas
2. Habilite la entrada que desea enfocar
3. Establecer el foco a esa entrada
4. Vuelva a habilitar todas las otras entradas