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

最近的项目做得是混合开发,其实比较尴尬的啦,手机端的安卓与ios挺多兼容问题的。

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(){

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值