Клавиатура не отображается при выборе <input>только на iOS

Question

Для определенного поля на моем веб-сайте клавиатура не отображается на моем веб-сайте при запуске в Safari iOS. Он работает в Интернете и Android chrome.

. Клавиатура появится только в том случае, если я выберу кнопку мультитаб в Safari и вернусь на сайт снова. Тогда клавиатура появится, когда я выберу поле.

Что меняется при выборе кнопки мультитаб, изменяющей поведение ввода с клавиатуры?

Обновление:

Перед нажатием на поле ввода текста (только для чтения свойство):

<div class="form-cell password">
    <span class="label">Password</span><br>
    <input type="password" name="loginValidVO.password" maxlength="15" mandatory="true" autocomplete="off" readonly
        onfocus="this.removeAttribute('readonly');" class="placeholder" id="password">
</div>

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

<div class="form-cell password">
    <span class="label">Password</span><br>
    <input type="password" name="loginValidVO.password" maxlength="15" mandatory="true" autocomplete="off"
        onfocus="this.removeAttribute('readonly');" class="placeholder" id="password">
</div>

Нужно ли что-то для обновления sh представления, чтобы удаление свойства поля ввода только для чтения вступило в силу?

Android работает безупречно с приведенным выше кодом, просто интересно, почему это происходит только на iOS устройстве (как сафари, так и chrome)

Answer 1

Попробуйте добавить дополнительный атрибут для события touchstart - ontouchstart, которое выполняет то же самое javascript:

<input type="password" name="extLoginValidVO.password" maxlength="20" mandatory="true" autocomplete="off" 
       ontouchstart="this.removeAttribute('readonly');" 
       onfocus="this.removeAttribute('readonly');" 
       class="placeholder"
       id="password"
       readonly>

Возможно, вы также захотите сохранить onfocus, так как оно необходимо для настольного компьютера браузеры. Вот jsfiddle, который я использовал: https://jsfiddle.net/u5g7t4c1/4/

Answer 2

Где / Когда вы установили свойство «Только чтение» на «Ввод»?

Это предотвращает всплывающее окно с клавиатурой.