Поля пароля.
Нам всем приходится иметь дело с ними, но ими никогда не доставляет радости. Ясно, что их нужно каким-то образом запутать — чтобы защитить наши пароли от посторонних глаз посторонних — но когда вы не видите, что печатаете, легко стать нерешительным, нервным и даже неуверенным в том, вводить правильную информацию.
Я опытный машинистка, но я все еще набираю пароли одним пальцем! А некоторые формы даже просят вас ввести их дважды , просто чтобы убедиться, что вы знаете, что вы ввели, и что вы ввели это правильно.
Поля пароля раздражают. Там должен быть лучший способ.
Платформенные решения
Вдали от Интернета были представлены различные платформенные решения. Рядом с полями беспроводного пароля Mac OS имеется флажок «Показать пароль», который позволяет просматривать его в виде обычного текста; мы рассмотрим это решение в следующем посте этой серии.
В этом посте мы рассмотрим решение, более распространенное среди портативных устройств. Последние устройства на Symbian и Android делают это, но это, вероятно, более широко известно на iPhone и iPod touch.
Поле маскированного пароля
Поле маскированного пароля скрывает все символы, кроме последнего , который отображается в виде обычного текста. Таким образом, вы всегда можете видеть, что вы печатаете, но весь пароль никогда не раскрывается, что делает почти невозможным тайное чтение:
Форма входа с замаскированным паролем.
Сейчас я собираюсь показать вам скрипт, который добавляет это поведение к обычным полям "password" .
Сценарий довольно сложный. Суть его проста, но есть несколько проблем, связанных с браузером и удобством использования, которые добавляют некоторые сложности. Поэтому, хотя я постараюсь дать вам хорошее представление о том, как все это работает, речь пойдет не о том, как
публиковать сообщения, а о том, нужно ли делать
обзор. Настоящая мелочь находится в самом сценарии, который подробно комментируется с подробностями того, что делает, что и почему.
Взгляните на демо и возьмите сценарий. Он работает во всех современных браузерах, включая IE6 :
Первый: разметка
Для начала нам нужно поле типа "password" Мы должны сделать это как прогрессивное усовершенствование, чтобы у неподдерживаемых браузеров или браузеров без сценариев оставалось правильное поле пароля:
<label for="pword">Password:</label>
<input type="password" id="pword" name="pword" />
Скрипт преобразует это в "text""hidden" В скрытом поле мы будем хранить обычную незашифрованную версию пароля, в то время как видимое поле — это то, что вводит пользователь, и где отображается замаскированный пароль.
Итак, вот чем в конечном итоге станет разметка:
<label for="pword">Password:</label>
<span>
<input type="hidden" name="pword" />
<input type="text" class="masked" id="pword" autocomplete="off" />
</span>
Вы можете видеть, как только скрытое поле сохраняет атрибут name , так что оно является единственным для отправки. Видимое поле — это то, что видят пользователи, но его значение будет нежелательным для любого другого процесса, поэтому мы не допускаем его отправки и (что крайне важно) не позволяем автозаполнению запомнить его (потому что все, что он запомнил бы, это последовательность точки, без возможности их расшифровки).
Первоначально у меня был элегантный процесс для выполнения этого преобразования разметки, но вполне естественно, что он не работал в IE . В Internet Explorer, даже самой последней версии, вы не можете изменить атрибут "type""type"любого поля формы, созданного в DOM . Единственный способ создать поля формы в IE — это записать их в исходном тексте и вставить их на страницу с помощью innerHTML Это ужасно, я знаю, но это то, что нужно, чтобы сделать эту работу.
Тогда: События
Как только у нас будет разметка, нам нужно обработать ее события; мы должны быть в состоянии реагировать на любой ввод, будь то с помощью клавиатуры, мыши или с помощью каких-либо программных средств. На самом деле существует так много способов, что было бы невозможно обслужить их всех заранее ; но мы можем отслеживать изменения задним числом и изменять значение сразу после его ввода. Пока мы делаем это достаточно быстро, пользователи не смогут заметить разницу. Для этого скрипт использует четыре слушателя событий .
Первые два обеспечивают прочную основу, будучи наиболее надежными и совместимыми с различными браузерами; это onkeyuponchange
Затем мы дополняем их некоторыми нестандартными событиями, которые похожи на onchange это oninputIE ) и onpropertychangeIE ). Мы должны быть осторожны с этими событиями, потому что они также запускаются мгновенно из программного ввода; поэтому мы должны следить за тем, чтобы наш код не создавал бесконечный цикл, вызывая событие, на которое он также реагирует.
Таким образом, с таким распространением слушателей событий мы охватили каждую базу и можем реагировать на ввод пользователя любым способом, практически мгновенно в большинстве случаев. И когда мы отвечаем, тогда происходит маскировка.
Когда в текстовое поле поступает новый ввод, первой задачей является экстраполяция всего простого пароля из данных, которые у нас уже есть, плюс новый ввод. Например, если скрытое поле содержит значение "passw""●●●●wo""passwo" Получив это, мы кодируем все значение и записываем его обратно в видимое поле, чтобы оно теперь "●●●●●o""passwo" (Сами точки — это символы Unicode, 25CF
Это повторяющийся взаимный процесс: новый ввод запускает декодирование, которое запускает перекодирование, и благодаря этому процессу мы постоянно получаем замаскированную и простую версию пароля; Форма может быть отправлена в любое время, и скрытое поле всегда будет отображать скрытое значение, которое вы видите.
Теперь для Gotchas!
Как мы только что видели, кодирование и декодирование маскированного пароля происходит путем сравнения двух значений символ за символом, но мы не можем этого сделать, если не знаем, какой символ соответствует какому; например, точка в индексе [0] В конечном счете, мы не можем позволить пользователям вводить символы в начале или в середине пароля, потому что это нарушит уравнение; только когда ввод ограничен концом, мы можем знать, как равняются символы.
Чтобы реализовать это, мы должны ограничить положение каретки , чтобы в скрипте была подпрограмма, которая делает именно это — всякий раз, когда поле имеет фокус, оно постоянно заставляет каретку быть в конце — так что вы можете редактировать или выбирать с конца, но не с начала или середины.
Мы также столкнемся с некоторыми проблемами безопасности в отношении того, как браузеры обрабатывают значение, содержащееся в поле. Поскольку поле, с которым мы работаем, является просто "text" В реальных полях "password" например, пользовательский ввод в поле пароля не сохраняется после мягкого обновления или при возвращении в историю; но с обычными текстовыми полями, это (или может быть).
Таким образом, мы должны реализовать дополнительное поведение, чтобы взять это под контроль. Сценарий удалит любое значение по умолчанию из исходного поля, а также вызовет событие reset() чтобы удалить любой остаточный ввод после мягкого обновления. (Вы также помните, как мы должны были отключить автозаполнение в поле, потому что значение, которое браузер попытался бы запомнить, это просто кучка точек.)
Учитывая все обстоятельства, эта реализация далеко не прямолинейна. Как я сказал в начале — суть его проста, но дьявол, как всегда, в деталях.
Вывод
Решение JavaScript для этого, вероятно, невозможно реализовать без каких-либо побочных эффектов. Браузер настроен для работы с "text""password" Но, что более важно, нам нужно разорвать физическую связь между данными в видимом поле и его аналогом в скрытом поле, чтобы снять ограничения ввода, и для этого действительно требуется реализация более низкого уровня (например, возможность хранить данные как свойства отдельного персонажа).
Я думаю, что такое поле пароля является хорошей идеей, но браузеры должны реализовывать его как тип input