Chrome Android клавиатура не меняется обратно на текст при выходе из поля ввода чисел

Question

Пример:

<form novalidate>
  <div class="field">
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
  </div>
  <div class="field">
    <label for="phone">Phone Number:</label>
    <input type="tel" name="phone" id="phone">
  </div>
  <div class="field">
    <label for="email">Email Address:</label>
    <input type="email" name="email" id="email">
  </div>
  <button type="submit">
    Submit
  </button>
</form>

https://jsfiddle.net/cuvqkp14/

(визит на планшет, рабочий стол Chrome не проблема)

Когда у меня есть два или более входов, один из которых имеет тип tel или чей режим ввода numeric, нажатие кнопки Далее на клавиатуре Android для перехода к следующему полю приводит к numeric раскладка клавиатуры, даже если следующее поле type=text, type=email или inputmode = text. Я должен нажать кнопку ABC слева от пробела, а затем мне разрешено вводить буквенные символы.

Мы проверили это на нескольких планшетах Android, работающих на Android 8.0 и Chrome 70 +

Как вернуть раскладку клавиатуры в альфа-режим?

Answer 1

протестировано на Android 9.0 с GBoard и Chrome 72.0.3626.76, но не удалось воспроизвести проблему.однако, атрибут inputmode будет поддерживаться начиная с Chrome для Android v 67, и это единственная альтернатива, о которой я могу подумать - кроме принудительного переключения с JS на события focus & blur:

<input id="phone" name="phone" type="text" inputmode="numeric" pattern="[0-9]*"/>

попытка воспроизвести проблему с помощью эмулятора Android может помочь сузить ее до причины ... и я так думаю, потому что некоторые устройства поставляются с клавиатурой, зависящей от производителя, которая может неправильно реагировать на события, генерируемые Chrome,совсем недавно я заметил небольшую разницу в поведении между вводами GBoard и SwiftKey, когда я охотился за головами.

связывание с "запросить сайт рабочего стола" также может стоить попытки.

Answer 2

document.addEventListener('focus', function(event) {
  if (["INPUT", "TEXTAREA"].indexOf(event.target.tagName) != -1 && event.target.getAttribute('data-focused') != 'true') {
    event.target.blur();
    event.target.setAttribute('data-focused', 'true');
    setTimeout(function() {
      event.target.focus();
    }, 0);
  }
}, true);
document.addEventListener('blur', function(event) {
  if (["INPUT", "TEXTAREA"].indexOf(event.target.tagName) != -1 && event.target.getAttribute('data-focused') == 'true') {
    event.target.removeAttribute('data-focused');
  }
}, true);

https://jsfiddle.net/g34d0nsk/

Answer 3

У меня была похожая проблема на iPhone. И я решил эту проблему на iPhone с помощью добавления из атрибутов шаблона к элементу HTML.

Попробуйте что-то вроде следующего кода с атрибутами шаблона:

<form novalidate>
  <p class="field">
    <label>Number: <input type="tel" name="number"></label>
  </p><p class="field">
    <label>Name: <input type="text" name="name"></label>
  </p><p class="field">
    <label>Phone Number: <input type="tel" name="phone"></label>
  </p><p class="field">
    <label>Street: <input type="text" name="street" inputmode="text" pattern=".*"></label>
  </p><p class="field">
    <label>Email Address: <input type="email" name="email" inputmode="email" pattern="[A-Z0-9a-z\.\-@]"></label>
  </p>
  <button type="submit">Submit</button>
</form>

К сожалению, моя система Android немного устарела, и я не могу воспроизвести вашу проблему - я пробовал ее в браузерах Chrome и Opera. И я надеюсь, что ваша проблема будет решена с помощью моего кода.

Вы можете дополнительно попробовать использовать атрибуты inputmode="text" и inputmode="email" для этих входов. Это поддерживается в Android Chrome и, возможно, будет работать.

---

Моя рекомендация

Вы можете написать свой код также намного короче без атрибута for="name" (для элементов метки) и id="name" (для элементов ввода):

<label>Name: <input type="text" name="name"></label>

В этом случае то же самое, что и с этими атрибутами.