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.
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.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.<input>
si como consecuencia el teclado se cierra pues bienvenido sea, me valdría.