带你跳出H5输入框input的坑

不知道经常做微信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就是整个容器。

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