Введите тип ввода = "Пароль". Используйте цифровую панель на мобильных устройствах.

На моем сайте, предназначенном для мобильных устройств, у меня есть поле ввода, которое используется для PIN-номеров. Я хочу, чтобы текст был скрыт по мере его ввода, и я хочу, чтобы номерная панель появлялась, когда пользователь на мобильном устройстве хочет ввести PIN-код. Числовая панель появляется, когда Type = "Number", но не когда Type = "Password", и я не могу (или не знаю, как) установить Type = "Number and Password".

Любые идеи?

Спасибо заранее!

Ответы

Ответ 1

Некоторые браузеры (iOS) распознают значение pattern атрибута [0-9]* как запуск цифровой клавиатуры.

Проект HTML 5.1 содержит атрибут inputmode, который был разработан для решения конкретной проблемы (например, клавиатура), но он еще не реализован.

Вы могли бы использовать его для будущего, хотя - хотя текущий HTML 5.1 не позволяет его для type=password по какой-то нечетной причине.

<input type="password" pattern="[0-9]*" inputmode="numeric">

Ответ 2

Наконец, я нашел ответ here:

input[type=number] {
    -webkit-text-security: disc;
}

(работает только в браузерах на основе WebKit)

Ответ 3

Простые способы, как использование "pattern" и "inputmode", которые не работают в Android и IOS, поэтому я реализовал ниже обходное решение с использованием CSS и JavaScript.

https://jsfiddle.net/tarikelmallah/1ou62xub/

HTML

 <div>
  <input type="password" class="form-control ng-valid-minlength ng-valid-pattern ng-dirty ng-valid ng-valid-required" id="pass" name="pass" data-ng-minlength="4" maxlength="4"  tabindex="-1">
  <input type="tel" class="form-control ng-valid-minlength ng-dirty ng-valid ng-valid-required" id="passReal" name="passReal" required="" data-ng-minlength="4" maxlength="4" data-display-error-onblur="" data-number-mask="telephone"
         tabindex="5">
</div>

JavaScript

$().ready(function(){
var xTriggered = 0;
$( "#passReal" ).keyup(function( event ) {
  $('#pass').val($('#passReal').val());
  console.log( event );
});
$( "#pass" ).focus(function() {
  $('#passReal').focus();
});

  });

Стиль:

input#passReal{
  width:1px;
  height:10px;
}
input#pass {
    position: absolute;
left:0px;
}

это изображение с эмулятора Android:

Ответ 4

Почему бы вам не установить ввод с помощью type="number" и использовать jQuery для изменения типа после нажатия клавиши на вводе.

$("input").keydown(function () {
    $(this).prop('type', 'password');
});

Тогда, если вы допустили ошибку. Вы можете очистить ввод и снова установить type="number".

$("input").click(function () {
    $(this).val('');
    $(this).prop('type', 'number');
});

Это мой первый ответ, и я надеюсь, что помог.

Ответ 5

или вы можете создать свою собственную клавиатуру с помощью javascript и CSS, а когда пользователь будет вводить число, bisplay * и сохранить значение в переменной javascript. Просто я сделал это и сделал логин пользователя очень плавным и легким... Первым мобильным телефоном