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) {
    // Обра­ба­ты­ваем ввод печат­ного сим­вола
  }
})


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

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

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

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

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

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

Как избежать эффекта Упячки при загрузке картинок 2 Разработчик, который не думает, а просто делает — не нужен? 4 Что делает тег meta с атрибутом name="viewport"? Зачем его указывать? Автотесты «на пальцах» 1




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

Как найти себе замену 1 2 2 2