前端开发微信公众号在ios中常遇见的问题和解决方法

1，

问题：ios手机输入框获得焦点，软键盘弹出，当其消失后，ios页面底部会被弹出来一大片

空白，

此时，页面整个卡住，点击其他功能不生效。

而且输入框离底部越近，ios页面底部被弹出来的空白区域越大，不仅样式上别扭，而且页面功

能无法正常运行

解决方法：

目前试过来最佳方法是输入框获取焦点时，给页面最外层盒子一个margin-bottom值500px左

右，失去焦点后再还原

代码：

//判断是否时苹果手机
var str = navigator.userAgent.toLowerCase();	
var ver = str.match(/cpu iphone os (.*?) like mac os/);	
//是苹果手机	
if(ver) {
    //获取焦点，软键盘弹出		
    $('input').focus(function() {
        //设定一个较大的值，input距离底部越近，值要设置的越大，一般500px到800px左右足够了			
        $('.main').css('margin-bottom','500px');			
    })	
    //失去焦点		
    $('input').blur(function() {
        //还原为初始值				
        $('.main').css('margin-bottom','0');			
    })	
}复制代码

2，

问题：将输入框作为按钮元素的情况下，点击时弹出弹窗，此时并不需要其手动输入功能

方式：给输入框标签添加readonly属性，在大部分ios手机上点击输入框后都不会出现焦点，但

是点击iphone7手机上的输入框依然会有焦点存在，并且神奇的是，弹窗出现后焦点会在弹窗

上出现

解决：可以将readonly改为disabled属性，此时需要添加一个父级元素作为按钮，不然会点击

无效，并且注意修改输入框背景颜色和字体颜色

//修改placeholder的显示
input[disabled]::-webkit-input-placeholder {
    -webkit-text-fill-color: #999;
}
//修改value值的显示
input[disabled]{
    background-color:transparent;
    -webkit-text-fill-color: #999;
}
复制代码

3，

问题：页面弹出弹窗，若无特殊设置的情况下页面依然可以滑动，弹窗上若有输入框存在，在

iphone7手机上点击弹窗上的输入框后，此时弹窗上的焦点会不稳定，到处乱跑，

解决：弹窗出现时，将页面固定住，不让滑动；

 禁止页面滚动方法（同时适用于安卓和ios手机）：

//页面滚动与不能滚动
function onHandler(event) {
    event.preventDefault();
}
//不让页面滚动
function noScroll() {
    $('html,body').css({
        'overflow':'hidden',
        'height':'100%'
    });
    document.addEventListener('touchmove',onHandler,false);
}
//恢复滚动
function getScroll() {
    $('html,body').css('overflow','inherit');
    document.removeEventListener('touchmove',onHandler,false);
}复制代码

转载于:https://juejin.im/post/5cc806f0e51d456e80351739