提高键盘上的输入类型文本在iframe在固定位置上chrome为android缩放时



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

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>

contents.html

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

我想让键盘在任意缩放级别上抬高。
这似乎是一个Chrome错误,有一个解决方案吗?

这是一个焦点问题吗?我可以在iframe中检测触摸事件,例如,如果我设置了一个侦听器,我可以清除输入中的占位符文本,但它不会弹出键盘。

向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>

Korimako的解决方案对我有效,但他的例子使用了touchend,而他的解释是touchstart。touchend事件不能为我工作,但touchstart可以。

最新更新