Мы, люди, любим идею неограниченного выбора, но часто не любим ее реальность. Если вы когда-нибудь проводили разочаровывающий вечер, играя "Куда вы хотите пойти пообедать?" (на который единственный ответ: «Я не знаю, где вы хотите поужинать?»), вы испытали это на собственном опыте. Мы никогда не хотим, чтобы наши пользователи чувствовали себя парализованными нерешительностью.
Есть несколько способов сформировать наш код, чтобы помочь нашим пользователям получить информацию, которую мы хотели бы получить от них, и я бы назвал это подходом «бампер для боулинга». Для большинства пользователей бамперы позволят без особых усилий доставить шар для боулинга от рук до кеглей. Однако это не помешает озорным пользователям найти способы испортить вашу базу данных, если у вас нет внутренней защиты. По этой аналогии, это парень, который решает бросить мяч вместо того, чтобы катить его.
Хотя подход с шаром для боулинга не защитит вашу базу данных от любых метателей мячей, он сделает ваше приложение более доступным для остальных пользователей. Эта статья поможет вам улучшить взаимодействие с пользователем вашего приложения с помощью HTML, JavaScript и CSS.
Настройка вашей формы с помощью HTML
Первый подход к ограничению пользовательского ввода - это HTML-форма. Если вы хотите получить базовый обзор форм или увидеть много других вариантов настройки форм, прочтите мою предыдущую запись в блоге Сохранение HTML-форм в верхней части. Сегодня мы остановимся лишь на некоторых из них. В этой ситуации полезны следующие параметры: maxlength, size и placeholder.
Пользователи будут делать множество предположений, основываясь на том, что они видят, и мы можем помочь, сделав так, чтобы то, что они видят, соответствовало тому, что мы ищем.
<form action="" method="post"> <p>Initials: <input id="initials" type="text" name="initials" maxlength="3" size="4" placeholder="ABC"></p> <input type="submit" id="initial-submit" value="Save Your Initials"> </form>
Этот код будет отображаться как:
Вот краткое описание того, что эти атрибуты делают для нас:
- Максимальная длина не позволит пользователю вводить больше символов, чем разрешено - в данном случае не более трех.
- Размер изменяет размер текстового поля в соответствии с длиной указанного количества символов - здесь мы используем четыре, потому что курсор занимает место, и это вызовет небольшую горизонтальную прокрутку, которая может быть неудобной для Пользователь.
- Заполнитель, заполненный серым текстом («ABC»), включенным в текстовое поле с самого начала. Это отличное место, чтобы либо показать пример того, что мы хотели бы видеть, либо его можно использовать для предоставления инструкций или разъяснения ограничений. Например, «Не более 25 символов», «Только имя» и т. Д.
Однако ничто из этого не помешает пользователю ввести «123» или «***». Вот тут и пригодится наш JavaScript!
Управление вводом с помощью JavaScript
Если вы хорошо разбираетесь в JavaScript, ниже представлен код для ознакомления. В противном случае мы рассмотрим его строка за строкой:
- document.getElementById («initials») - Этот метод документа захватит для вас HTML-элемент на основе его идентификатора. Вы также можете заменить это на querySelector или другой метод документа для захвата элементов из DOM.
- .addEventListener («keydown», (event) = ›{…} - это прикрепит прослушиватель событий к выбранному вами элементу HTML. Когда он« слышит »нажатие клавиши, он запускает стрелочная функция. Стрелочная функция передает событие, которое вызвало ее, как переменную event в теле функции.
- if (event.key.match (/ [a-zA-Z] + / g)) {return event;} - Если ключевой атрибут события совпадает с RegEx, пусть событие произойдет как обычно. В этом случае это позволит букве появиться в текстовом поле. Вы можете заменить этот RegEx на тот, который вам подходит.
- else {event.preventDefault ();} - если нажатая клавиша не соответствует вашему регулярному выражению, это предотвратит появление формы письма в текстовом поле.
document.getElementById("initials")
.addEventListener("keydown", (event) => {
if (event.key.match(/[a-zA-Z]+/g)) {
return event;
} else {
event.preventDefault();
}
});
Вы можете подумать: «Погодите, никто не пишет инициалы строчными буквами ... Этот фрагмент кода JavaScript ничего не сделает, чтобы предотвратить это!» Это 100% правда. Помните, что наша цель - улучшить взаимодействие с пользователем, поэтому мы хотим максимально упростить им задачу. Когда мы захотим обработать их ввод, мы обработаем его форматирование с помощью простого:
document.getElementById("initials").value.toUpperCase();
Это возьмет текст, введенный в текстовое поле «инициалы», и превратит его в заглавные буквы. Теперь пользователю не нужно беспокоиться о поиске клавиши Shift или работе с Caps Lock, от которого нам легко уклониться!
Добавление стиля с помощью CSS
Наконец, важно, чтобы пользователь знал, что он вводит. Совсем не весело думать, что ты получаешь красивое платье, и удивляешься! он размером с бэби-куклу. Мы всегда хотим быть уверены, что для наших пользователей все ясно, особенно если мы собираемся манипулировать их вводом вне поля зрения с нашей стороны.
CSS делает это для нас невероятно простым. Все, что вам нужно сделать, это добавить этот код в свой файл CSS:
input[type="text"] {
text-transform: uppercase;
}
И вуаля! По мере того, как пользователь вводит свой ввод, он автоматически отображает все символы в верхнем регистре.
С большой властью приходит большая ответственность
Благодаря мощным возможностям HTML, CSS и JavaScript у нас под рукой практически нет ограничений на то, что вы можете выполнять в своем приложении. Однако легко позволить этой силе вскружить вам голову! Имейте в виду, что самое главное - это пользователь, и когда дело доходит до пользовательского ввода, никто не хочет удивляться. Стремитесь придерживаться принципа веб-дизайна «то, что вы видите, то и получаете», и максимально упростите жизнь пользователям, и вы останетесь на правильном пути!
Если вы хотите увидеть этот код в действии, посмотрите Fauxtris на Github. Это забавный клон тетриса, использующий обычный JavaScript и Rails в качестве API. Если у вас возникнут вопросы, обращайтесь ко мне!
