4

Ando con un problema que me está generando un verdadero quebradero de cabeza.

El problema viene de mi necesidad de forzar que tras seleccionar una opción del listado que da como resultado autocomplete, el <input> pierda el foco. La solución por la que he optado ha sido utilizar el evento blur() de Jquery.

En escritorio funciona perfectamente, selecciono el elemento de la lista y el <input> pierde el foco correctamente. Pero mi sorpresa viene de ver que en dispositivos móviles el <input> continúa teniendo el foco.

He estado buscando y no encuentro información útil al respecto, cosa que me choca dado que dudo que sea el único al que le ha escamado semejante comportamiento.

Monté un ejemplo sencillo para realizar pruebas, sacado del ejemplo básico de autocomplete:

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
      select: function () {
      	$( "#tags" ).blur();
      }
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

En el ejemplo, se puede apreciar que efectivamente, la pérdida de foco se sucede tras seleccionar un elemento de la lista, pero que esto no ocurre si se usa, por ejemplo, el emulador de móvil de las Herramientas de Desarrollador de Google Chrome.

¿Alguna idea para un hombre desesperado?

EDIT

Encontré una manera de hacerse, pero no termina de convencerme debido a que en el fondo pienso que algo tan simple como eso debe de tener una manera de hacerse que no sea por trampear.

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
      select: function () {
      	setTimeout(function(){
          $('#tags').blur();
        },0);
      }
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

Esta solución se basa en crear un setTimeout de 0 segundos y dentro de este ejecutar el método blur(). Según he leído no funciona en navegadores Ópera y no termino de comprender muy bien el por que funciona realmente.

4
  • De hecho, en la consola aparece un error 404 y hace referencia a este archivo: forzar-a-que-elemento-pierda-el-foco-en-dispositivos-móviles. No se si sirva de algo esta info, pero bueno, no está de más revisar.
    – DjCrazy
    el 30 may. 2019 a las 13:17
  • @DjCrazy Era por un css que tenía cargado el ejemplo que que he subido. Ya está removido para que no ocurra el error. y no, el error no viene de ahí, gracias por el comentario.
    – phpMyGuel
    el 30 may. 2019 a las 13:21
  • Qué es lo que sucede, te sigue mostrando el teclado y querés que desaparezca o que también saque el foco del input?
    – Kleith
    el 30 may. 2019 a las 13:51
  • @Kleith El teclado es lo de menos en mi caso. Lo que necesito es que pierda el foco el <input> si como consecuencia el teclado se cierra pues bienvenido sea, me valdría.
    – phpMyGuel
    el 30 may. 2019 a las 13:56

1 respuesta 1

1

Una opción que encontré fue la de usar un hack que crea un input, le hace foco y luego lo elimina. Lo probé con iOS Chrome y Safari, y parece funcionar bien.

function forceBlur(parent) {
  // creo el input
  var input = $('<input type="text" />');
  // lo agrego
  input.insertAfter(parent);
  // hago foco de ese input
  input.focus();
  // remuevo del DOM el input
  input.remove();
}

Lo único que agregaría, es que se ejecute esta función sólo si es mobile. Y así quedaría:

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
      select: function () {
      	$( "#tags" ).blur();
        
        // esto para mobile
        function forceBlur(parent) {
          var input = $('<input type="text" />');
          input.insertAfter(parent);
          input.focus();
          input.remove();
        }
        
        // lo ejecuto sólo para mobile
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
          forceBlur($('.ui-widget')[0]);
        }
      }
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

5
  • Si, ese hack también lo vi yo, junto a otro que también me soluciona en parte la papeleta y que parte de realizar el blur() desde dentro de un setTimeout de 0 segundos. Pero no me terminan de convencer. Mi cabeza se niega a que no haya una manera mejor de hacerse que recurriendo a este tipo de procedimientos XD
    – phpMyGuel
    el 30 may. 2019 a las 14:31
  • Y con eso tampoco te funcionó o es otro problema ahora?
    – Kleith
    el 30 may. 2019 a las 14:32
  • Si, me funciona, pero me gustaría ver si existe una manera más limpia de hacerse. Si nadie más se postula daré como válida tu respuesta y mi cabezonería aceptará que no existe otra.
    – phpMyGuel
    el 30 may. 2019 a las 14:35
  • 1
    Al parecer el blur() no tiene efecto en dispositivos móviles pero hay otros gestos que si existen como touchcancel, touchleave y touchend pero al probarlos no funcionó con lo esperado. Y el manejo de que siga el focus es algo propio del SO.
    – Kleith
    el 30 may. 2019 a las 14:43
  • Nah, esa manera tampoco funciona aparentemente. No lo había probado del todo bien. Al parecer los dispositivos móviles también le tiene ojeriza a al evento focus().
    – phpMyGuel
    el 30 may. 2019 a las 15:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.