3

Chrome for Android で、iframe 内の固定位置にある html テキスト入力要素に触れても、ドキュメントが 100% を超えてズームされている場合、一貫してキーボードが上がりません。

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

例: Chrome for Android でこのページにアクセスして入力を選択すると、キーボードが表示されます。ここで、キーボードを閉じてページをスケーリングします (スケーリングが識別できるように、ページにいくつかのコンテンツを配置しました)。ページが拡大されている場合 - iframe 内の html テキスト入力要素に触れても、常に入力が表示されるわけではありません。ズーム レベルを 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>

content.html

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

どのズーム レベルでもキーボードを上げたいと思います。
これは Chrome のバグのようですが、回避策はありますか?

これは焦点の問題ですか？iframe でタッチ イベントを検出できます。たとえば、リスナーを設定すると、入力のプレースホルダー テキストをクリアできますが、キーボードは表示されません。

4

2 に答える 2

2

リスナーを touchstart に追加すると、入力フィールドにフォーカスが呼び出され、デフォルトのアクションが回避されるようです。入力要素がぼやけていました - おそらく埋め込みページにフォーカスが移ったのでしょう。

<!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>
于 2013-01-21T20:14:38.380 に答える
1

コリマコの解決策は私にとってはうまくいきましたが、彼の例では touchend を使用し、彼の説明は touchstart と言っていました。touchend イベントは機能しませんでしたが、touchstart は機能しました。

于 2013-10-03T17:55:08.803 に答える