gpt4 book ai didi

html - 缩放时在 chrome for android 的固定位置在 iframe 中的输入类型文本上抬起键盘

转载 作者:行者123 更新时间:2023-11-28 00:12:22 32 4
gpt4 key购买 nike

在 Android 版 Chrome 上,当文档缩放超过 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>

内容.html

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

我希望键盘在任何缩放级别都能升高。
这似乎是一个 Chrome 错误,是否有解决方法?

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

最佳答案

向 touchstart 添加一个监听器,然后调用输入字段上的焦点并防止默认操作似乎是一种变通方法。 input 元素被模糊了 - 也许焦点进入了嵌入页面。

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

关于html - 缩放时在 chrome for android 的固定位置在 iframe 中的输入类型文本上抬起键盘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14445276/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com