Поднимите клавиатуру на ввод текста в iframe в фиксированном положении на Chrome для Android при увеличении

В Chrome для Android прикосновение к элементу ввода текста html, расположенному внутри iframe в фиксированном положении, не приводит к постоянному подъему клавиатуры, когда масштаб документа превышает 100 процентов.

http://theyrule.net/test/iframetest/

Например: зайдите на эту страницу в Chrome для Android и выберите вход, появится клавиатура. Теперь отклоните клавиатуру и масштабируйте страницу (я поместил некоторый контент на страницу только для того, чтобы было заметно масштабирование). Если страница увеличена - прикосновение к элементу ввода текста html в iframe не всегда вызывает ввод. Его можно снова вызвать, вернувшись к уровню масштабирования 100%.

index.html

<!DOCTYPE html>
<html>
  <style>
    body {background-color:#FFCC00; font:80px sans-serif; color:#FFF; width:1000px; height:2000px;}
    div { width:300px; height:1000px; float:left; padding:0.1em;}
  </style>
  <head>
  </head>
  <body>
  <div style="background-color:#CC3333;">A</div>
  <div style="background-color:#FF9900;">B</div>
  <div style="background-color:#FFCC00;">C</div>
  <iframe src="contents.html" style="width:300px; height:100px; position:fixed; bottom:0; right:0;">
  </body>
</html>

contents.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" />
</body>
</html>

Я бы хотел, чтобы клавиатура поднималась при любом уровне масштабирования.
Это похоже на ошибку Chrome, есть ли обходной путь?

Это основной вопрос? Я могу обнаружить сенсорное событие в iframe, например, если я установлю слушателя, я могу прояснить текст заполнителя во вводе, но это не вызовет клавиатуру.

Источник

2 ответа

Решение

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

<!DOCTYPE html>
<html>
<body>
<input type="text" id="tt"/>
<script>
document.getElementById("tt").addEventListener('touchend',function(e){e.target.focus(); e.preventDefault();}, false);
</script>
</body>
</html>
Источник

Решение Коримако сработало для меня, но в его примере использовался touchend, где в его объяснении говорилось о старте. Турнирное событие не сработало для меня, но сработало.

Источник
Другие вопросы по тегам