Вход в HTML с помощью салфетки для карты

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь создать страницу входа в html, которая позволяет пользователю входить в систему с помощью смахивания карты (с помощью устройства чтения карт, подключенного к их компьютеру). Моя первоначальная мысль заключалась в том, чтобы создать скрытое текстовое поле, сфокусировать внимание на скрытом текстовом поле, и когда карта перемещается, информация о карте попадает в поле и отправляет форму.

Проблемы: 1. Я продолжаю получать ошибку JS при попытке xx.focus () для скрытого текстового поля. 2. Я сделал текстовое поле видимым, но установил его высоту и ширину в 1 пиксель. Тем не менее, вы все еще можете видеть, как курсор мигает в текстовом поле.

Вопрос: У кого-нибудь есть отличный способ реализовать эту идею?

Ответ №1:

Если вы не хотите, чтобы пользователь когда-либо видел текстовое поле, вы можете использовать старый прием CSS «скрывать содержимое с экрана«. Просто установите абсолютную позицию слева или справа, которую не сможет отобразить ни один экран. Например (извлечено со страницы, на которую дана ссылка):

 .offscreen {
    position: absolute;
    left: -999em;
}
  

Комментарии:

1. Да, это идеальный способ скрыть это.

Ответ №2:

Короткий ответ:

Да, input скрытый с помощью css (не type="hidden" ) на самом деле единственный способ.

Почему?

В прошлом мне приходилось иметь дело с кард-ридерами с эмуляцией клавиатуры в веб-браузерах. Я пробовал решения на чистом javascript (например, просто прослушивание событий нажатия клавиш в DOM), однако я сталкивался с тем, что часто на карточках могут быть управляющие символы, на которые реагирует браузер.

Ответ №3:

Похоже, вы уже близко. Вы также могли бы создать быстрое флеш-приложение, в котором появятся дополнительные опции soem. Что касается html, попробуйте установить стиль цвета текстового поля / заполнения для перемещения курсора из вида