Переключение между типом = пароль / тип = номер и запросом для цифровой клавиатуры на планшете

Question

У меня работает приложение HTML5 на планшете Android с несколькими полями ввода, использующими тип = число. Цифровая клавиатура всплывает, как и ожидалось, когда эти поля получают фокус.

Одним из этих полей является сбор номера социального страхования клиента. Наши требования говорят, что поле должно показывать полный SSN, когда сфокусировано, и точки, если оно размыто. Я реализовал это с двумя полями SSN. Один тип ввода = пароль, один тип ввода = номер и по умолчанию скрыт.

<input type="password" name="SSN_Pass" id="SSN_Pass" value="" placeholder="SSN" />
<input type="number" name="SSN" id="SSN" value="" maxlength="9" class="required number" />

У меня есть jQuery, который скрывает поле пароля, когда оно получает фокус, и показывает поле номера. Размытие числового поля копирует значение обратно в поле пароля.

$("#SSN_Pass").focus(function()
{
    $(this).hide();
    $("#SSN").show().focus();
});

$("#SSN").blur(function ()
{
    $(this).hide();
    $("#SSN_Pass").show().val($(this).val());
});

Проблема, с которой я столкнулся, заключается в том, что в браузере Android появляется полная буквенно-цифровая клавиатура, когда фокус сначала появляется на поле пароля, либо при щелчке поля ввода или при его нажатии. Пользователь должен щелкнуть по отображаемому теперь числовому полю, чтобы открыть цифровую клавиатуру. Несмотря на то, что я вызываю focus () в поле видимого номера SSN, полная буквенно-цифровая клавиатура остается включенной.

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

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

Предложения

Answer 1

Мне кажется, самый простой способ избежать этого - вообще не иметь поля пароля. Я думаю, что я бы, вероятно, ссылку или span (с tabindex) или что-то в стиле, чтобы выглядеть как поле и заполнить его с * с или чем-то еще, и тогда ссылка становится активной, а затем заменить его на число поле. Надеемся, что, поскольку ссылка не будет вызывать клавиатуру, замена ее числовым полем и фокусировка на этом поле откроет цифровую клавиатуру.

Обновление : Нет, тогда он не участвует в кнопках «следующий» и «предыдущий» на клавиатуре браузера (по крайней мере, на моем iPhone). Итак, мое резервное предложение:

• Всегда имейте поле там, но сделайте его очень, очень маленьким.
• Рядом с ним отображаются *.
• Когда пользователь вводит поле, заполните его настоящим SSN и разверните его, скрывая элемент дисплея.
• Когда пользователь покидает поле, очистите его, сделайте его снова маленьким и обновите элемент экрана.
• Когда вам необходимо отправить форму, непосредственно перед отправкой заполните скрытое поле или аналогичное.

Вот совершенно нестандартный пример, который на моем iPhone работает как нужно:

Живая копия | Живой источник

HTML (другие поля только для контекста):

<input type="text" id="someTextField" value="Just some field" style="width: 20em">
<br><span id="fakeSSN">***-**-****</span><input type="number" id="realSSN" style="width:1px">
<br><input type="text" value="Some other field" style="width: 20em">

JavaScript:

jQuery(function($) {
  var ssn = "";

  $("#realSSN")
    .focus(function() {
      $("#fakeSSN").hide();
      $(this).css("width", "20em").val(ssn);
    })
    .blur(function() {
      var $this = $(this);
      ssn = $this.val();
      $this.val("").css("width", "1px");
      $("#fakeSSN").show();
    });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

Answer 2

Установить атрибут напрямую: $(el).attr('type', 'number').