3

在适用于 Android 的 Chrome 上，当文档缩放超过 100% 时，触摸位于 iframe 内固定位置的 html 文本输入元素不会始终抬起键盘。

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

例如：在 Chrome for Android 上访问此页面并选择输入，它将调出键盘。现在关闭键盘并缩放页面（我在页面上放置了一些内容，以便可以识别缩放）。如果页面被放大 - 触摸 iframe 中的 html 文本输入元素不会总是显示输入。可以通过返回 100% 缩放级别再次调出。

索引.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>

内容.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

Korimako 的解决方案对我有用，但他的示例使用 touchend，而他的解释是 touchstart。touchend 事件对我不起作用，但 touchstart 可以。

于 2013-10-03T17:55:08.803 回答