x
 
Алексей Рогулин
23 мая 2013

Удачное ли решение на сайте в поле пароля указывать, что нажат капслок, как на Маке? Нигде не встречал.



Хорошая идея. Кстати, в Сафари и Хроме на Маке так и есть, скриншот:

Я уверен, это особенность операционной системы, а не браузеров, несмотря на то, что в Опере и Файрфоксе под Маком такой индикации нет.

На Яваскрипте капслок определяется только косвенно, после нажатия клавиши. Напрямую никак. Вот мой вариант с Джейквери:

$(function () {
  var mac = /^Mac/.test(navigator.platform),
      $pass = $('#pass'),
      $passHelp = $pass.next('.help');

  $pass.keypress(function (e) {
    // Нажатие клавиши в поле пароля

        // Код символа
    var code = e.which,

        // Сам символ
        symbol = String.fromCharCode(code),

        // Нажат ли капслок?
        capsLock =
          // Да, если это верхний регистр,
          symbol.toUpperCase() === symbol
          // a не нижний (есть одинаковые
          // в обоих регистрах символы),
          && symbol.toLowerCase() !== symbol
          // и не нажат шифт на Винде
          && (!e.shiftKey || mac);

    // Подсказка
    $passHelp.text(capsLock ? 'Капслок?' : '');
  });
});

Попробуйте:

О вводе пароля при регистрации

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

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

Комментарии

Александр Качкаев
23 мая 2013

Артём, а что если шифт нажат на Маке? В код просится тест на название браузера или как минимум замена (!e.shiftKey || mac) на (!e.shiftKey && !mac).


23 мая 2013

На Маке с зажатым шифтом буквы всегда в верхнем регистре независимо от капслока, и никаких выводов о его включённости сделать нельзя, поэтому условие такое.

Константин Якушев
23 мая 2013

На тач-клавиатурах всегда говорит, что капслок. Может быть нужно ещё проверять тип браузера или наличие тача, например?


23 мая 2013

Странно. Свои тач-устройства — Айфон, Айпад и планшет на Андроиде — я проверил, всё работает™. Но ясно, что такой косвенный метод не надёжен. Я уверен, что такая индикация в общем случае — забота операционной системы, а не разработчика. За всеми телефонами, планшетами, игровыми приставками и телевизорами не уследишь.

Александр Богачёв
24 мая 2013

Просится сбоку от формы ввода написать: «КАПСЛОК?»

Сергей Киров
25 мая 2013

Включил капс, нажал шифт, набрал пару символов — индикации нет.


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

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

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

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

Сайты для слабовидящих 2 За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5