微信小程序键盘遮挡输入框问题

　　微信小程序键盘遮挡输入框问题,我们在玩微信小程序时，屏幕上弹出的键盘，遮挡输入框，很是不好，当微信小程序键盘遮挡输入框时，怎么办？小编就来说一下关于微信小程序键盘遮挡输入框问题。

　　1、手机端h5页面中输入法键盘会遮挡输入框的问题。

　　$('input').on('focus',function(event){

　　//自动反弹 输入法高度自适应

　　var target = this;

　　setTimeout(function(){

　　target.scrollIntoViewIfNeeded();

　　},100);

　　});

　　由于不同的输入法键盘高度不一致，这使得我们在开发当中要做很多兼容，但是针对不同的输入法键盘和不同的手机去做这样一个兼容是很耗费时间的。

　　像苹果手机就有自带的输入法，当我们使用自带的输入法时，键盘也许不会遮挡输入框，然而用户会使用各种各样的输入法。

　　所以，

　　jQuery的scrollIntoViewIfNeeded()方法，可以做到将输入框移动至视野中。

　　从而解决了键盘遮挡文本输入框的问题。

　　2、模仿微信输入框失去焦点时隐藏iphone的软键盘和聚焦时出现输入框

　　function BlurOrFocus(){

　　var obj = document.getElementsByClassName('input')[0];

　　var docTouchend = function(event){

　　if(event.target!=obj){

　　setTimeout(function(){

　　obj.blur();

　　document.removeEventListener('touchend',docTouchend,false);

　　},1000);

　　}

　　}

　　if(obj){

　　obj.addEventListener('touchstart',function(){

　　document.addEventListener('touchend',docTouchend,false);

　　},false);

　　}

　　}

　　以上就是微信小程序键盘遮挡输入框问题的全部内容，更多小程序、小程序资讯请关注本微信小程序网站。

　　更多推荐：

　　如何实现微信小程序简单留言板?

　　微信小程序分享到朋友圈方法 微信小程序可以分享朋友圈?

　　微信小程序中form 表单提交和取值实例详解