javascript - desenfocar un cuadro de texto

Question

Tengo una plantilla móvil con un formulario de inicio de sesión que es la navegación basada en hash ajax/url. Si en un iPhone un usuario hace clic en el botón "ir" en el teclado del iPhone, el ajax lo autentica/registra y luego carga la siguiente página dentro de otro div y oculta el formulario de inicio de sesión actual.

El problema es que, en un iPhone, el teclado aún aparece. ¿Hay alguna forma de desenfocar un elemento de cuadro de texto mediante javascript?

Answer 1

Utilice el método blur() o intente fijar el foco en otro elemento como un enlace.

Answer 2

Si no tiene fácil acceso al elemento específico que desea difuminar, existe una forma un poco hacky de implementar la funcionalidad "desenfocar todo".

Apenas añada el siguiente código HTML en algún lugar de su página:

<input id="blur-hack" type="text" style="position: absolute; opacity: 0;"> 

Entonces este JS se unfocus nada centrado actualmente:

document.getElementById("blur-hack").focus(); 

Tenga en cuenta que para el estilo HTML en línea, que no podemos hacer display: none o de lo contrario no puede enfocarse en él. position y opacity eliminará adecuadamente el elemento del flujo - también se podría utilizar márgenes de empujarlo lejos de la página, etc.

Answer 3

Esto es lo que he usado cuando .blur() no quería ser mi amigo

function blurAll(){ 
var tmp = document.createElement("input"); 
document.body.appendChild(tmp); 
tmp.focus(); 
document.body.removeChild(tmp); 
} 

Answer 4

Esto mantendrá rollo, y no causa ningún destello de un elemento

resetFocus() { 
    let scrollTop = document.body.scrollTop; 
    let body = document.body; 

    let tmp = document.createElement('input'); 
    tmp.style.opacity = 0; 
    body.appendChild(tmp); 
    tmp.focus(); 
    body.removeChild(tmp); 
    body.scrollTop = scrollTop; 
} 

basado en la solución de @ skygoo

Answer 5

Construyendo sobre la solución de @shygoo - ¡esto se traduce bien en TypeScript!

export function unfocus(): any { 
    const tmp: HTMLInputElement => document.createElement('input'); 
    document.body.appendChild(tmp); 
    tmp.focus(); 
    document.body.removeChild(tmp); 
} 

Algunas notas ...

1. Es de tipo any para que sea compatible con el servicio de AngularJS $timeout, a pesar de que en realidad nunca devuelve nada.
2. tmp es constante ya que nunca cambia durante el tiempo de vida de la llamada a la función.