Как отслеживать что с полем input никаких действий больше не производится?

Question

[pcdesign]

Например, есть поле input
<input class="my-input">
Пользователь туда что-то ввел и больше ничего не делает.
Как автоматически убрать фокус с этого поля при отсутствии активности?
Например, если поле не изменялось в течении 5 секунд.

Answer 1

[Сергей Соколов]

По событию "input" отменять предыдущий таймаут, если был, и создавать новый, на 5 секунд.

Comments

[pcdesign]

А если юзер просто навел курсор, сделал input активным и больше ничего не делает. Как в этом случае лишать его по таймауту фокуса?

[Сергей Соколов]

pcdesign, тогда срабатывает событие "focus" на этом input'е. Всё то же, только слушать 2 события: "input" и "focus".

Answer 2

[Дмитрий]

<input type="text" oninput="setTimeout(function() { document.querySelector('button').focus() }, 2500)">

<button type="button">test</button>

Comments

[Сергей Соколов]

только вместо .focus() надо .blur()

[Дмитрий]

Сергей Соколов, Зачем? Фокус переводится на кнопку через 2500мс, после того, как в input перестал поступать ввод. Вы прежде чем писать, закиньте в CP и посмотрите...

[Сергей Соколов]

Дмитрий, не заметил, что вы кнопку добавили. В вопросе её не было.

[Дмитрий]

Сергей Соколов, Так она просто для примера... Я хз, вдруг автор собирается перенаправить фокус, в противном случае, зачем вообще его (фокус) убирать, если не предполагается его перевод на другой элемент....