null

Сбрасываем focus и значения input'а по нажатию на ESC

В этой заметке рассмотрим пример того, как можно очищать значение поля ввода и сбрасывать с него фокус по нажатию на клавишу ESC.

 

Для начала: "О чём вообще речь и что нужно сделать?". Чтобы ответить на эти вопросы смотрим на скриншоты ниже.

 

Пользователь нажал на поиск и ввел запрос, здесь параллельно вводу 'vk' подгружает ему возможные результаты.  В этот момент по любой причине он решил прервать это действие и переключиться на что-то другое, например выбрать другую песню. Вот не задача - окно с результатами-подсказками перекрыло кнопку для выбора следующей композиции.

Какие варианты решения проблемы?

1) Если поле ввода пустое, не показываем это окно. Итог пользователю ничего не мешает, но чтобы провернуть такое действие, ему понадобится целая пачка лишних телодвижений (выделить текст, нажать 'backspace'). Нужен вариант с меньшим кол-вом кликов/нажатий.

2) Навесить на input обработчик события onBlur внутри которого скрывать это окно. Здесь нам нужен лишь один клик мышкой вне области поля ввода, чтобы закрыть окно. И ещё один для того, чтобы сменить композицию. Хорошо, но т.к. скорость перемещения курсора по экрану медленее чем нажатие клавиш на клавиатуре, есть желание заменить клик мышкой на нажатие клавиши.

3) Если находясь в поле ввода мы нажимаем 'escape', то вызываем blur у элемента. Семантика клавиши к такому поведению располагает, скорость работы пользователя по сравнению с предыдущим вариантом, также повышается.

 

В рассмотреном ранее примере с  'vk' результат нажатия 'ESC' будет такой.

 

Задача ясна. Осталось написать её решение.  Код решения ниже.

<html>
<head>
</head>
<body>
    <input type="text" id="input"/>
    <script>
    var element = document.getElementById("input");

    element.onkeydown = function(e) {
	if (e.keyCode == 27) {
	   e.target.value = "";
	   e.target.blur();		
	}
    }
    </script>
</body>
</html>

 

Здесь мы имеем html страницу с полем ввода, и js скрипт в котором получаем элемент и привязываем функцию-обработчик к соответствующему событию от клавиатуры. В функции проверяем код нажатой клавиши (27 - это escape). Если был нажат escape, то очищаем поле и вызываем метод элемента blur. Onblur - событие которое происходит, когда фокус исчезает с элемента. Метод blur - уводит фокус с элемента.

Если покопаться в js коде страницы vk, то там также можно найти вызов blur.

 

На этом всё. Вот такая получилась простая и короткая заметка.