Javascript - расфокусировать текстовое поле

У меня есть мобильный шаблон с формой входа в систему, которая представляет собой просмотр на основе ajax/url. Если на iphone пользователь нажимает кнопку "go" на iphone-клавиатуре, ajax аутентифицирует/регистрирует их, а затем загружает следующую страницу внутри другого div и скрывает текущую форму регистрации.

Проблема в том, что на iphone клавиатура по-прежнему всплывает. В любом случае, чтобы развернуть элемент текстового поля с помощью javascript?

Ответы

Ответ 1

Используйте метод blur() или попробуйте установить фокус на другой элемент, например ссылку.

Ответ 2

Это то, что я использовал, когда .blur() не хотел быть моим другом

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

Ответ 3

Если у вас нет простого доступа к определенному элементу, который вы хотите размыть, есть немного хакерский способ, который вы можете реализовать "размыть все".

Просто добавьте следующий HTML-код на свою страницу:

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

Затем этот JS будет расфокусировать все сосредоточенные в данный момент:

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

Обратите внимание, что для встроенного стиля HTML мы не можем сделать display: none, иначе вы не сможете сосредоточиться на нем. position и opacity будут адекватно удалять элемент из потока - вы также можете использовать поля, чтобы вытолкнуть его со страницы и т.д.

Ответ 4

Это будет поддерживать прокрутку и не вызывать никаких вспышек элемента

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;
}

на основе решения @skygoo

Ответ 5

Основываясь на решении от @shygoo - это хорошо переводится в TypeScript!

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

Некоторые примечания...

  • Он имеет тип any, поэтому он совместим с сервисом AngularJS $timeout, даже если он никогда ничего не возвращает.
  • tmp является постоянным, так как он никогда не изменяется во время жизни вызова функции.