x
 
Илья
2 ноября 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Привет!

Как железобетонно определить, печатный ли символ ввёл пользователь?


В книгах бюро поиск и его результаты появляются в процессе ввода. Во время чтения читатель начинает набирать интересующее его слово, одновременно с первым введённым символом появляется поиск, а затем и его результаты.

Поиск в «Типографике и вёрстке». При нажатии на «энтер» книга перелистывается к первому результату поиска

Чтобы реагировать на ввод, в Яваскрипте есть три события: keydown, keyup и keypress. Для распознавания ввода keydown и keyup не подходят: по ним нельзя отличить a от A — события всегда ссылаются на символ в верхнем регистре. keypress подходит: возникает, если нажата символьная клавиша, ссылается на правильный символ.

Но keypress срабатывает и при наборе непечатных символов (перевод строки, мягкий перенос) и служебных комбинаций (например ctrl+, на Маке). Чтобы отфильтровать такие символы и открыть попап с поиском, если пользователь действительно ввёл что-то печатное, используем «пробник». Вставляем то, что ввёл читатель, в ДОМ-элемент и проверяем его ширину:

// Добавляем пробник в ДОМ
// и скрываем за границей экрана
const $probe = $('<span></span>')
  .css({ position: 'fixed', left: '-1000px', bottom: 0 })
  .appendTo('body')

$(document).on('keypress', (event) => {
  // Получаем введенный символ
  const char = String.fromCharCode(event.charCode)

  // Вставляем введённый символ в пробник
  // и проверяем его ширину
  if ($probe.html(char).width() > 0) {
    // Обрабатываем ввод печатного символа
  }
})

Клавиатура: keyup, keydown, keypress

P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как устроена беспарольная аутентификация почтой 7 Как вы проверяете соответствие вёрстки макету 2




Недавно всплыло

1 2 Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1 10