带你跳出H5输入框input的坑

最新推荐文章于 2023-08-17 16:41:46 发布

Jouryjc

最新推荐文章于 2023-08-17 16:41:46 发布

阅读量2.2w

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 JavaScript 文章标签： javascript html 手机

本文链接：https://blog.youkuaiyun.com/qq_22509715/article/details/52452458

JavaScript 同时被 2 个专栏收录

42 篇文章

订阅专栏

HTML5

16 篇文章

订阅专栏

本文介绍了在开发微信H5页面时，遇到手机键盘弹出导致页面被压缩的问题，以及如何通过JavaScript动态调整页面top和高度来解决这一问题，适用于Android和iOS设备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不知道经常做微信H5的小伙伴有没遇到这样的问题，在PC浏览器完美测试的页面，一到手机上就崩溃。

崩溃的程度决定了你的心情，哈哈。完美的呈现总有不明的自豪感。屌屌的！哈哈！

但是作为一名稳重的程序员，最起码的沉着肯定是要有的。我今天就来沉着的吹牛*了！

遇到的问题是input的坑——手机的键盘把H5的页面压榨了，很难受。不管是Android还是IOS都曾经遇到过这个问题。

解决思路也比较简单，就是通过JS把页面的top和高度都动态再设置一次，完美解决！

直接上代码！

HTML

<span style="font-size:18px;"><input type="number" id="typeBox" name="phone" required ></span>

<span style="font-size:18px;">
</span>

<span style="font-size:18px;">JS</span>

<span style="font-size:18px;">
</span>

<pre name="code" class="javascript"><span style="font-size:18px;">var bodyH = document.body.clientHeight;
var type = document.getElementById('typeBox');
var fif = document.getElementById('fip');
type.addEventListener("focus",function() {
	fif.style.top = 0 + "px";
	fif.style.height = bodyH + "px";
});
type.addEventListener("blur",function() {
	fif.style.top = 0 + "px";
	fif.style.height = bodyH + "px";
});</span>

其中fip就是整个容器。

以上方法就可以解决这个坑啦，希望遇到这个问题的童鞋能够参考解决咯。或者有更好的办法分享！