javascript - teclados - teclado iphone descargar
el teclado del iPhone no se esconde al tocar la pantalla (7)
Bueno ... Puedes darme esa recompensa porque acabo de resolver este problema usando una solución muy SIMPLE .
Paso 1 : compruebe si la entrada está actualmente enfocada. Explicaré más adelante por qué necesitamos agregar un retraso para cambiar el valor de la variable inputFocused .
var inputFocused = false;
$(''input'').focus(function(){
setTimeout(function(){
inputFocused = true;
},100);
});
Paso 2: agregue un detector de eventos si se toca o hace clic en la pantalla o $(window) . Si se hizo clic o se hizo clic en la ventana, compruebe si la entrada está actualmente enfocada. Si es verdadero , debe enfocar la ventana $(window).focus() , después de enfocar la ventana, la función blur () ahora funcionará. por lo que ahora puede desenfocar el elemento de entrada, el teclado se ocultará automáticamente y luego establecerá la variable de entrada en inputFocused en falso nuevamente.
$(window).click(function(){
if(inputFocused == true){
$(window).focus();
var input = $(''input'');
input.blur();
inputFocused = false;
}
});`
Explicación de SetTimeout: El evento $(window).click() se activará si el usuario toca o hace clic en cualquier parte de la pantalla (por ejemplo , hacer clic en el botón, hacer clic en la entrada, tocar o hacer clic en la pantalla, etc. ). Si toca la entrada, al mismo tiempo configura la entrada inputFocused en verdadero , el evento $(window).click() activa y luego verifica si inputFocused es verdadero y luego ejecutará el código que oculta el teclado virtual. Entonces, cada vez que enfoque un campo de entrada, el teclado se ocultará y eso será un problema.
Es por eso que estamos agregando un retraso para que el código dentro de if(inputFocused == true) no se ejecute mientras estamos enfocando el campo de entrada y solo se ejecutará si el campo de entrada está actualmente en foco.
¡TRATADO Y PROBADO!
Tengo un campo de entrada con tipo de número
<input type="number" pattern="[0-9]*"/>
En los navegadores normales, estoy escribiendo algunos números y estoy tocando la pantalla, oculta el teclado de iphone / ipad.
Pero esto no funciona si está dentro de iframe . tenemos que hacer clic en el botón de hecho de forma explícita. Este problema es solo para iphone / ipad
Este es un problema de iframe. Cualquier corrección usando Javascript / Jquery sería muy apreciada.
Actualizado
Intentó
document.activeElement.blur();
y el enfoque cuando el evento se desencadena en javascript. ninguno de ellos está funcionando ..
$(document).on(''focusin'', function(){
$(''input'').css("background-color", "green");
console.log(''focusin!'')
});
$(document).on(''focusout'', function(){
console.log(''focusout!'')
$(''input'').css("background-color", "yellow");
$(''input'').blur();
});
¡focusout no está llamando dentro de iframe!
Mi pregunta es **How to force close ipad/iphone keypad when input element is not focused using Javascript/Jquery?**
¡Las respuestas serán recompensadas como se indica!
En una aplicación iónica utilicé una directiva sobre el cuerpo que intercepta las entradas.
MyApp.directive(''dismissIosKeyboardOnClick'', function () {
return function (scope, element, attrs) {
if (cordova.platformId=="ios") {
element.on("touchstart", function(e) {
var keyboardDoms = new Set(["INPUT","TEXTAREA","SELECT"]);
if( keyboardDoms.has(document.activeElement.nodeName) &&
!keyboardDoms.has(e.target.nodeName) )
document.activeElement.blur();
});
}
};
});
Index.html
<body ... dismiss-ios-keyboard-on-click></body>
Espero que esto resuelva tu problema, simplemente elimina el foco en el elemento activo.
- Usando Javascript
document.activeElement.blur();
- Usando jQuery
$("#Clicked_button_id").click(function() { $("#input_field_id").blur(); });
Para quitar el teclado, debe perder el foco en su entrada.
document.activeElement.blur();
Con esta línea, eliminas el foco y el teclado desaparece.
En su caso, es posible agregar un evento en su cuerpo y detener este evento si hace clic en una entrada.
$(document).ready(function () {
$(''body'').click(function () {
document.activeElement.blur();
console.log("blur");
});
$(''input'').click(function (event) {
event.stopPropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"/>
Actualizar
Encontré esta answer para obtener un elemento activo en un iframe.
/**
* Return the active element in the main web or iframes
* @return HTMLElement
**/
function getActiveElement() {
var focused = false;
// Check if the active element is in the main web or no
if (document.body === document.activeElement ||
document.activeElement instanceof HTMLIFrameElement) {
// Search in iframes
$(''iframe'').each(function() {
var element = this.contentWindow.document.activeElement;
// If there is a active element
if (element !== this.contentWindow.document.body) {
focused = element;
return false; // Stop searching
}
});
} else focused = document.activeElement;
return focused; // Return element
}
Con esta función puede obtener el elemento activo en el documento o en un iframe.
Después, debe quitar el foco en este elemento para ocultar el teclado.
getActiveElement().blur();
Posiblemente tenga una solución para tu problema en iOS. Mi configuración es safari en iOS 8.3 / 5C.
A partir de mis experimentos, me parece que el elemento del cuerpo en Safari / iOS no es receptivo a ningún evento de clic. No puedo explicar por qué, pero parece que sí.
Entonces, lo que he hecho es: poner un envoltorio div justo dentro del cuerpo y permitir que reciba el clic.
Main.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>keyboard hide issue</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//!SOLUTION
$(''#body-wrapper'').click(function(e) {
console.log(''I got clicked'');
});
});
</script>
<style>
/* ignore this. Its just styles. ... */
div#body-wrapper {
height: 200px;
width: 100%;
background-color: red;
}
input {
margin: 10px;
}
</style>
</head>
<body>
<div id="body-wrapper">
<input type="text" id="main-input1"/>
<input type="number" id="main-input2"/>
<input type="email" id="main-input3"/>
</div>
<iframe src="blur.html"></iframe>
</body>
</html>
blur.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Blur iFrame</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//!SOLUTION
$(''#wrapper'').click(function(e) {
//do nothing
});
});
</script>
<style>
/* ignore this. Its just styles. ... */
div#wrapper {
height: 100px;
width: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="number" pattern="[0-9]*" id="main-input"/>
</div>
</body>
</html>
En ambos archivos, puedo ocultar el teclado muy bien. Una vez más, no conozco la razón subyacente, pero háganme saber si no puede replicar la solución.
No lo he probado en un iPad. Gracias ...
Prueba esto. Esto detecta cuando tabula cualquier elemento excepto la entrada y luego lo desenfoca.
$("html").children().not("#input_field_id").click(function(){
$("#input_field_id").blur();
});
html target <input> y <textarea> , iphone y ipad no ocultan el teclado al grabar en el área en blanco, ¡pero Android lo hará! necesitamos ocultar el teclado a mano, significa configurar el desenfoque de la entrada;
aquí gose el código
$(function(){
var cacheInput = null;
var timer = null;
if(!isApple()){
return false;
}
$(document).on(''focus'',''input'',function(e){
cacheInput = e.target;
})
$(document).on(''focus'',''textarea'',function(e){
cacheInput = e.target;
})
$(document).on(''touchend'',function(e){
if(e.target.tagName!==''INPUT''&&e.target.tagName!==''TEXTAREA''){
if(cacheInput!==null){
timer = setTimeout(function(){
cacheInput.blur();
clearTimeout(timer);
},300)
}
}
})
function isApple(){
var ua = navigator.userAgent.toUpperCase();
var
ipad = ua.indexOf(''IPAD'')>-1,
ipod = ua.indexOf(''IPOD'')>-1,
iphone = ua.indexOf(''IPHONE'')>-1 ;
return ipad || ipod || iphone ;
}
})