Эти вещи о вводе пароля во всплывающем окне мобильного телефона

внешний интерфейс JavaScript Android iOS
Эти вещи о вводе пароля во всплывающем окне мобильного телефона

Добро пожаловать в команду веб-разработчиков Futu, php, front-end нуждается в вас.несоответствие

Когда начать? Сначала посмотрю, там много чего, боюсь всех в канаву заведу. Теперь давайте сразу к делу, давайте сначала поговорим о том, что происходит. Как следует из названия, на самом деле пользователю предлагается ввести торговый пароль на странице подписки на IPO в мобильном браузере.

Это не просто ввод пароля транзакции, я думаю, что это выглядит очень просто, и это легко сделать.

Следующий контент основан на модуле подписки IPO компании Futu Securities.

Перед входом в яму

Очень рад, как и ожидалось. Проблем с подпиской на новые акции нет. Пароль входной транзакции визуального черновика, вероятно, выглядит как на картинке ниже. Если оригинал рукописи для подписки на новые акции не может быть найден, вместо этого я найду тикет об ошибке. Это очень просто, если введенный пароль транзакции соответствует логике проверки перед отправкой, никаких дополнительных операций не требуется. Этот тип дизайна на самом деле не имеет [больше?] меньше работы во внешнем интерфейсе.

pwd

Введите пароль транзакции в старой версии WEB

Что ж, верно. Сегодня это история обо мне и скромном окне ввода пароля транзакции выше.

Жизнь полна сюрпризов. Если бы все было так просто, то не было бы такой проблемы.

в яму

Вскоре после того, как он появился в сети. Из-за потребностей развития бизнеса подписки на IPO страницу необходимо встроить в приложение. Я думал, что это не должно быть проблемой, в конце концов, страница была адаптирована для мобильного терминала.

Так прошло N дней. Внезапно однажды меня нашел одноклассник, который отвечал за спецификацию дизайна приложения. Говорят, что операция ввода пароля транзакции на странице подписки IPO не соответствует спецификациям дизайна приложения и нуждается в изменении. полно мозгов? ? ? Ну, я сказал это в то время, я сделал это в соответствии со спецификациями дизайна на стороне WEB.

Давайте сначала поговорим о предыстории: примерно так: приложение компании и веб-сайт имеют различный набор спецификаций дизайна, и обычно они не сильно пересекаются. Но как только страница, созданная в соответствии со спецификацией WEB, встраивается в приложение, возникает проблема. Поскольку страница, созданная в соответствии со спецификацией веб-дизайна, встроена в Приложение, она не обязательно соответствует спецификации дизайна Приложения.

pwd

Приложение входит в черновик проекта пароля транзакции, вы можете видеть, что он полностью отличается от WEB, это поле ввода собственного приложения.

Ну, это каноническое пересечение дизайна поставило меня в тупик. Итак, что мне делать? Пусть ответственный за интерфейс, ответственный за веб-дизайн, ответственный за дизайн приложений и ответственный за видение обсудят вместе.

Иди, иди, иди, иди, иди, иди, иди, иди, иди, иди, иди, иди, иди! !

После всеобщего обсуждения я, наконец, решил изменить спецификации на стороне WEB, попробовать использовать всплывающее окно для ввода пароля транзакции и изменить входной пароль транзакции на стороне WEB, чтобы он соответствовал спецификациям приложения. То есть следующее всплывающее окно для ввода пароля транзакции выглядит так.

Пароль транзакции представляет собой комбинацию из 6 цифр.

pwd

Новая версия-01 Пароль транзакции ввода WEB

Как видно из приведенного выше рисунка, нажмите кнопку «Подписаться сейчас», появится всплывающее окно для ввода пароля транзакции, а затем нажмите всплывающее окно для входа (версия с мягкой клавиатурой автоматически не тянет вверх). После завершения ввода введите пароль в соответствии с шагами 1 и 2 справа.

Фрагмент HTML-кода всплывающего окна пароля транзакции:

<div class="ui-dialog-body ui-form">
    <div class="ui-form-item" ng-class="{'ui-focus':focused}">
        <ul class="pwdList ui-form-text">
            <li ng-repeat="item in passwordList track by $index" ng-click="inputFocus()">
                <span ng-class="{'dot':item}"></span>
            </li>
        </ul>
    </div>
    <input type="text" name="txtPassword" ng-trim="false" ng-model="pwdValue" ng-change="updatePassword();" ng-focus="onFocus();" ng-blur="onBlur()" autocomplete="off" autocorrect="off" maxlength="6">
</div>

Отображение длины ввода пароля транзакции через li

Принцип заключается в том, чтобы поставить прозрачныйinputкоробка размещенаulвыше,ulвнутриliИспользуется для отображения длины введенного пароля.

Вскоре после запуска некоторые пользователи сообщили, что не могут отправить пароли транзакций. Причина в том, что когда программная клавиатура не скрыта в iOS, нажатие кнопки «Подтвердить» недействительно.

pwd

Отзывы пользователей, нажмите «Отправить» недействительно, это не решение. . . попросить помощи

Таким образом, я успешно вошел в яму.

Запущена первая версия, резюмирующая проблемы с указанным выше полем ввода пароля транзакции на мобильном терминале:

  1. Мягкая клавиатура не может автоматически подтягиваться;
  2. Когда виртуальная клавиатура не скрыта, вопрос пароля транзакции не может быть отправлен в обычном режиме;
  3. Нажмите, чтобы ввести пароль транзакции, чтобы подтянуть не цифровую клавиатуру;
  4. Если пароль введен неправильно, повторная попытка невозможна, и пользователю необходимо снова нажать «Подписаться сейчас», после чего появится всплывающее окно с паролем.

Копать яму...

В ответ на вышеуказанные проблемы приоритетное решение по решению проблем 2 и 4. Потому что это повлияло на обычный опыт бизнес-процессов. Так начинается оптимизированная версия.

Чтобы решить проблему 2, все (одна и та же волна людей) обсудили и решили удалить кнопки «Отмена» и «Подтвердить» и изменить их на автоматическую отправку (то есть, когда количество цифр ввода пароля пользователя достигает 6 автоматически инициируется внутренний Ajax-запрос. ). Это гарантирует, что бизнес не пострадает. Для вопроса 4 предусмотрено второе всплывающее окно для ввода пароля транзакции, что делает весь процесс бизнес-операций более плавным.

pwd

Новая версия-02 Нажмите «Подписаться сейчас», появится всплывающее окно ввода пароля транзакции, и он будет автоматически отправлен после его ввода.

Оптимизированная версия красивее и эффективнее, а главное, пользовательский опыт тоже классный. HTML-код всплывающего окна с паролем транзакции без кнопки «Подтвердить»:

<div class="ui-dialog-box passwordBox" ng-class="{'ui-show': isShowPwd}" ng-show="isShowPwd">
    <div class="ui-dialog ui-center">
        <div class="ui-dialog-header">
            <h3 class="ui-dialog-header-title">{{dtitle||'请输入富途交易密码'}}</h3>
        </div>
        <div class="ui-dialog-body ui-form">
            <div class="ui-form-item" ng-class="{'ui-focus':focused}">
                <ul class="pwdList ui-form-text">
                    <li ng-repeat="item in passwordList track by $index" ng-click="inputFocus()">
                        <span ng-class="{'dot':item}"></span>
                    </li>
                </ul>
            </div>
            <input type="text" name="txtPassword" ng-trim="false" ng-model="pwdValue" ng-change="updatePassword();" ng-focus="onFocus();" ng-blur="onBlur()" autocomplete="off" autocorrect="off" maxlength="6">
        </div>
        <i class="ui-icon ui-dialog-close icon-close" ng-click="closeClick()"></i>
    </div>
</div>

Таким образом я заделал 2 отверстия, которые закопал. При этом он вырыл себе две ямы.

Вскоре после этого одноклассники из службы поддержки клиентов сообщили, что после того, как пользователь Android нажал кнопку «Подписаться сейчас», появилось окно с паролем транзакции.

pwd

Нажмите, чтобы ввести пароль транзакции, программная клавиатура блокирует поле пароля транзакции, Боже мой. . . .

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

pwd

У-у-у-у-у-у-у, жук. Что не так с мобильным.

Только что решил 2 проблемы, и вот еще 2.

Я могу винить только себя за то, что принял это как должное, я должен подумать об этом. Подводя итог, текущие проблемы:

  1. Мягкая клавиатура не может автоматически подтягиваться;
  2. Окно пароля транзакции на машине Android заблокировано программной клавиатурой;
  3. Нажмите, чтобы ввести пароль транзакции, чтобы подтянуть не цифровую клавиатуру;
  4. После автоматической отправки кода программная клавиатура не скрывается автоматически.

Ну и еще четыре вопроса.

Заполнение дыры...

Давайте снова расставим вопросы по приоритетам, иначе сначала нужно решить вопросы 2 и 4.

Проблема 2 Решение проблемы, заключающейся в том, что окно пароля транзакции на машине Android заблокировано программной клавиатурой.

Мы все знаем, что когда мы вводим данные на странице. Как правило, при поднятии программной клавиатуры соответствующее поле ввода перемещается на сегмент вверх. Убедитесь, что поле ввода находится в пределах видимого диапазона страницы. Обычная ситуация показана на Рисунке 1 слева, как показано на рисунке ниже, но некоторые браузеры блокируют поле ввода после появления экранной клавиатуры, как показано на Рисунке 2 справа.

pwd

Левый 1 в норме, правый 2 имеет проблемы

Решение состоит в следующем:

.pwd-wrapper{
    position:fixed;//主要是这个
    top: 10px; //这个
    z-index:999;
}

Изначально всплывающее окноfixed, установивtopСвойства, поместите всплывающее окно пароля транзакции вверху страницы. Это позволяет избежать блокировки всплывающего окна программной клавиатурой.

Вам может показаться, что это очень неуместно, и всплывающее окно не центрировано вверх и вниз. На самом деле, только браузер с проблемой будет не по центру, но это намного лучше, чем программная клавиатура, блокирующая окно пароля транзакции. В остальном нормальные браузеры, хотя я писал вышеtop:10pxЭто не похоже на центрирование сверху вниз, но результат имеет нормальное центрирование сверху вниз.

Это убедило меня, одним словом, если нет проблемы, нет проблемы, если есть проблема, если нет проблемы, то есть и проблема.

Что ж, проблема 2 благополучно решена.

Проблема 4 Программная клавиатура не скрывается автоматически

Это должно сработать. То есть пусть поле ввода потеряет фокус.

$('input[name="txtPassword"]').blur();

Не является ли этот вопрос пустой тратой времени? Это так просто, почему я не добавил это в то время, я помню, что добавил это.

«Очевидно, это парень из соседнего дома, который не добавил событие JavaScript в нужное место при сортировке его во всплывающем компоненте пароля…». >_> , шучу.

Появление передовой черной технологии

Благодаря жестокой эксплуатации пользовательский опыт значительно улучшился. пополнение. . . .

Может вздохнуть с облегчением. Затем медленно решите оставшиеся две задачи выше.

  1. Мягкая клавиатура не может автоматически подтягиваться;
  2. Нажмите, чтобы ввести пароль транзакции, чтобы подтянуть вместо цифровой клавиатуры.

Если подумать, то проблема не в не подтянутой оптимизацией цифровой клавиатуре.

Решена проблема, что цифровая клавиатура не выдвигается при вводе пароля транзакции

если не правильноinputЕсли выполнены настройки специального типа, виртуальная клавиатура обычно будет отображаться в соответствии с языком, выбранным в настройках пользователя.

Схема входного набора type="text"

всегда используетсяtype="text"поле ввода. Следовательно, нажав на программную клавиатуру, подтянутую всплывающим окном, можно ввести китайский язык, который явно не соответствует цифрам, требуемым паролем транзакции.

Часть кода для ввода всплывающего окна по умолчанию:

 <div class="ui-dialog-body ui-form">
    <div class="noticeInfo">{{notice}}</div>
    <div class="ui-form-item" ng-class="{'ui-focus':focused}">
        <ul class="pwdList ui-form-text">
            <li ng-repeat="item in passwordList track by $index" ng-click="inputFocus()">
                <span ng-class="{'dot':item}"></span>
            </li>
        </ul>
    </div>
    <input type="text" name="txtPassword" ng-trim="false" ng-model="pwdValue" ng-change="updatePassword();" ng-focus="onFocus();" ng-blur="onBlur()" autocomplete="off" autocorrect="off" maxlength="6">
</div>

существуетtype="text"на основе добавленияpattern="[0-9]*", обнаружил, что ios может нормально подтягивать цифровую клавиатуру, а android - не китайский метод ввода.

Хэппи, этот план приемлем.

Код изменен следующим образом:

<input type="text" pattern="[0-9]*" name="txtPassword" ng-trim="false" ng-model="pwdValue" ng-change="updatePassword();" ng-focus="onFocus();" ng-blur="onBlur()" autocomplete="off" autocorrect="off" maxlength="6">

С небольшими изменениями дисплей программной клавиатуры уже соответствует ожиданиям. Сравнение показано на рисунке ниже.

pwd

Левое изображение по умолчанию type="text" , правое изображение type="text" pattern="[0-9]*"

попробуй использоватьtype="number"иtype="password". Установлено, что эффект не используется выше<input type="text" pattern="[0-9]*">Эффект хороший.

Код теста выглядит следующим образом:

<!-- type = number -->
<input type="number" name="txtPassword" ng-trim="false" ng-model="pwdValue" ng-change="updatePassword();" ng-focus="onFocus();" ng-blur="onBlur()" autocomplete="off" autocorrect="off" maxlength="6">
<!-- type= password -->
<input type="password" name="txtPassword" ng-trim="false" ng-model="pwdValue" ng-change="updatePassword();" ng-focus="onFocus();" ng-blur="onBlur()" autocomplete="off" autocorrect="off" maxlength="6">

можно увидетьtype="number"Появляется цифровая клавиатура, но не 9-сетка,type="password"То, что всплывает, это буквы, не говоря уже о том, что эффект средний.

pwd

Левое изображение — это type="number" по умолчанию, правое изображение — type="password"

Наконец, после сравнения, решил использовать<input type="text" pattern="[0-9]*">Формат. По крайней мере ios подтягивает сетку из 9 квадратов, а android подтягивает цифровую клавиатуру.

Таким образом, оптимизация берет волну. . . . . . .

Проблема обычно в мобильном телефоне босса

Так же, как я пил апельсиновый сок, слушал песенки и возился с кодом. Товар прислал картинку.

pwd

Когда пользователь устанавливает Sogou в качестве метода ввода по умолчанию

Какие? ? ? ? ? ? ? ? ? Поднятая программная клавиатура на самом деле является методом ввода Sogou, который, должно быть, является рекламой.

Я наверное спросил о причине и следствии.Оказался VVIP клиент.Недаром метод ввода имеет особое отношение. Это смущает. Я не могу позволить клиентам изменить метод ввода по умолчанию в системе.

В основном потому, что сторонний метод ввода имеет риск записи паролей.

Я не могу дождаться, я немедленно собрал голосование людей, чтобы обсудить, кря кря кря кря кря кря кря кря кря! ! ! ! !

В ходе обсуждения были достигнуты следующие решения:

  1. изменить на<input type="password">Отформатируйте, чтобы можно было подтянуть родной метод ввода, но не обязательно цифровую клавиатуру
  2. Обратитесь за помощью к одноклассникам клиента, чтобы узнать, можно ли ограничить метод ввода; это нормально в приложении, но в браузере все равно будут проблемы.
  3. Реализовать клавиатуру ввода пароля самостоятельно, а яму копать хочется

Однако все вышеперечисленные решения не являются хорошими. Кроме того, продукт, босс продукта не согласен. Как это сделать? ? ?

Приложите согласованные усилия для поиска в Интернете, чтобы увидеть, какие веб-сайты вытащили программную клавиатуру, которая является родной цифровой клавиатурой, и, наконец, нашли ее.

Код прост:

pwd

Труд и управление, когда я увидел эту строку кода, я чуть не упал на землю. Какие! ! ! Есть еще такая операция, черная технология, она у вас есть? Во всяком случае, я поверил. Чего же ты ждешь, попробуй.

Часть кода выглядит следующим образом:

<div class="ui-dialog-body ui-form">
    <div class="noticeInfo">{{notice}}</div>
    <div class="ui-form-item" ng-class="{'ui-focus':focused}">
        <ul class="pwdList ui-form-text">
            <li ng-repeat="item in passwordList track by $index" ng-click="inputFocus()">
                <span ng-class="{'dot':item}"></span>
            </li>
        </ul>
    </div>
    <input type="tel" pattern="[0-9]*" name="txtPassword" ng-trim="false" ng-model="pwdValue" ng-change="updatePassword();" ng-focus="onFocus();" ng-blur="onBlur()" autocomplete="off" autocorrect="off" maxlength="6">
</div>

Это действительно возможно, не так ли? использоватьtype="tel"Что действительно может подпрыгнуть, так это родная клавиатура с 9 сетками. Кажется, звонок все-таки от отца.

pwd

установить поле вводаtype="tel"

Эту операцию необходимо зафиксировать в небольшой тетрадке.

git commit -a '为了用户密码安全，默认拉起原生9宫格键盘'

Сделанный.

Как автоматически подтянуть программную клавиатуру

Оригинальная мягкая клавиатура никогда не подтягивалась автоматически. Логика взаимодействия следующая, пользователь должен вручную щелкнуть поле ввода, чтобы вызвать экранную клавиатуру.

pwd

Не могу автоматически подтянуть программную клавиатуру

Теперь я хочу реализовать, что после того, как пользователь нажмет кнопку «Подписаться сейчас», программная клавиатура может быть автоматически подтянута. Как показано ниже.

pwd

Автоматически подтягивать мягкую клавиатуру

Общей практикой является добавление кнопки «Подписаться сейчас».clickсобытие, когда нажимается кнопка «подписаться сейчас», вызывает окно пароля транзакцииfocusсобытие.

Попробуйте реализовать:

Измените html кнопки подписки:

<button type="submit" class="ui-btn"  ng-click="submitApply()">立即认购</button>

Обработка через события JavaScript.

$scope.submitApply = function(){
    //密码框聚焦
    $input.focus();
    $scope.focused = true;//设置flag
}

Этот метод также доступен онлайн. Хотя со стороны ПК можно нормально работать, на мобильной стороне программную клавиатуру нормально не подтянуть.

Вывод: прямой фокус() не работает и нуждается в дальнейшем изучении.

Используйте фокус ввода, чтобы открыть функцию программной клавиатуры.

Так как программная клавиатура работает только тогда, когда пользователь вручнуюtouchПоле вводаfoucusкогда он всплывает. Можно ли попробовать изменить кнопку "Подписаться сейчас" наinputПоле ввода с использованием исходной кнопки в качестве фона.

Возьмите волну случая и измените структуру кнопки в следующем формате:

<div class="sub-container">
    <button type="submit" class="ui-btn" ng-class="{'ui-btn-loading': !isCanApplyNewStock}" ng-disabled="!render.agreement||!isCanApplyNewStock" ng-click="submitApply()">立即认购</button>
    <input type="tel" pattern="[0-9]*" class="trade-pwd" ng-click="submitApply()">
</div>

Практика: то есть поставить прозрачныйinputПоле размещается над кнопкой подписки, и когда пользователь нажимает, на него на самом деле нажимают.inputПоле ввода. Угадайте: в это время, поскольку поле ввода щелкнуто, программная клавиатура будет поднята, и в то же время будет выполнено вышеуказанное.submitApply()функция, чтобы сфокусировать курсор на поле пароля транзакции.

pwd

структура кнопки

При тестировании на реальной машине выяснилось, что программную клавиатуру можно было нормально подтянуть. Гипотеза установлена.

pwd

Поднимите цифровую программную клавиатуру, как обычно

Практические инструкции черезinputПоле ввода, после подтягивания программной клавиатуры, может быть выполнено через JavaScriptfocus()Сосредоточьтесь на других полях ввода и убедитесь, что виртуальная клавиатура не свернута, а поле ввода в фокусе может быть введено нормально.

Возьми волну. . . .

Суммировать

В общем, это все операции над полем ввода, Зная принцип, на самом деле это довольно просто. Ямы все наступили, чего же вы ждете, поторопитесь и оптимизируйте поле ввода.

Если у вас есть хорошие предложения, пожалуйста, оставьте сообщение для обмена.

оригинал:На фото IM/статья/iNirvana…

автор:Jin

Категории