H5移动端遇到问题整理

动态查询赋值 poppicker 下拉框

// 可以把这个方法放到Ajax查询的回调方法中
function fnInitPickerServiceype(json){
    var arr = [];
    var jsonObjs = json.objs;
    if(json != null && json.objs != null && json.objs.length > 0) {
        $.each(jsonObjs, function(i, obj) {
            var value = jsonObjs[i].id;
            var name  = jsonObjs[i].name;
            arr.push({value:value,text:name});
        });
    }
    mui.init();
    mui.ready(function() {
        var serviceypePicker = new mui.PopPicker();
        serviceypePicker.setData(arr);
        var serviceypeButton = document.getElementById('serviceClassifyIdDiv');
        var serviceypeResult = document.getElementById('serviceClassifyId');
        serviceypeButton.addEventListener('tap', function(event) {
            serviceypePicker.show(function(items) {
                serviceypeResult.value = items[0].text; //如果是input框
                serviceypeResult.innerText = items[0].text; //如果是div框
            });
        }, false);        
    });
}

 

解决poppicker 和上拉加载冲突

var picker = new mui.PopPicker({
    buttons: ['取消', '确认']
})
picker.setData(carList);

var select = document.getElementById('selectCity');
select.addEventListener('tap', function(event) {
    mui('#refreshList').pullRefresh().disablePullupToRefresh();  //禁用上拉加载
    picker.show(function(item) {
        document.getElementById('selectCity').value = item[0].text;
    })

},false);

var html = document.querySelector('html');
html.addEventListener('tap', function(event) {
    mui('#refreshList').pullRefresh().enablePullupToRefresh(); //启用上拉加载
    mui('#refreshList').pullRefresh().refresh(true);
},true);

 

这是通过addEventListener()方法实现的，如果这个函数的最后一个参数是true，则在捕获阶段绑定函数(从外到里)，反之false，在冒泡阶段绑定函数（从里到外）。

 

禁用重启滚动条

$('.mui-content').css({'overflow-y':'hidden','height':'100vh'}); //暂时禁用滚动条
$('.mui-content').css({'overflow-y':'auto','height':'auto'}); //重新开启滚动条

 

模拟上滑取消录音

var startY; // 起点坐标
var Y;  // 手指滑动距离
$("body").on("touchstart", function(e) {
    startY = e.originalEvent.changedTouches[0].pageY; 
});  
$("body").on("touchmove", function(e) {  
    var moveEndY = e.originalEvent.changedTouches[0].pageY;  // 终点坐标
    Y = moveEndY - startY;   //计算手指滑动距离
});  
if(Y < -20) { //上滑一定距离代表是上滑则取消事件的执行
    return;
} 

 

弹出框禁止遮罩层移动

document.addEventListener('touchmove', function (event) { 　　 //监听滚动事件
    event.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
},{passive:false});  //不能省略，为了兼容IOS

 

打开页面默认弹出软键盘，同时兼容iOS和Android

注：input不需要添加autofocus属性。 

function open_soft_keyboard(){  
    if(plus.os.name == 'iOS'){  
        setTimeout(function(){  
            var wv_current = plus.webview.currentWebview().nativeInstanceObject();  
            wv_current.plusCallMethod({"setKeyboardDisplayRequiresUserAction":false});  
            document.querySelector('input');  //光标自动定位到页面第一个input框
        }, 330);  
    }else{  
        // 因为安卓autofocus只有4.0版本以上才支持，所以这里使用native.js来强制弹出  
        setTimeout(function(){  
            // 在执行的时候需要让当前webview获取焦点  
            var wv_current = plus.android.currentWebview();  
            plus.android.importClass(wv_current);  
            wv_current.requestFocus();  

            var Context = plus.android.importClass("android.content.Context");  
            var InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");  
            var main = plus.android.runtimeMainActivity();  
            var imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);  
            imm.toggleSoftInput(0,InputMethodManager.SHOW_FORCED);  
            document.querySelector('input');  //光标自动定位到页面第一个input框
        }, 330);  
    }  
}

 

监听手机软键盘弹出收起

软键盘弹起和收起在 IOS 和 Android 上的表现不尽相同。

IOS 软键盘弹起表现

在 IOS 上，输入框（ input、 textarea 或 富文本）获取焦点，键盘弹起，页面（ webview）并没有被压缩，或者说高度（ height）没有改变，只是页面（ webview）整体往上滚了，且最大滚动高度（ scrollTop）为软键盘高度。

 

Android 软键盘弹起表现

同样，在 Android 上，输入框获取焦点，键盘弹起，但是页面（ webview）高度会发生改变，一般来说，高度为可视区高度（原高度减去软键盘高度），除了因为页面内容被撑开可以产生滚动， webview 本身不能滚动。输入框失去焦点时，软键盘收起，输入框并不会失去焦点。

 

监听软键盘弹起和收起

Android

//获取原窗口的高度
$(window).resize(function(){
    //键盘弹起与隐藏都会引起窗口的高度发生变化
    if($(window).height() == MAX_HEIGHT){
        //当软键盘弹起，在此处操作
    }else{
        //当软键盘收起，在此处操作
    }
}

 

IOS

window.addEventListener("focusin", function(event) {
    alert("IOS弹出键盘")
})    
window.addEventListener("focusout", function(event) {
    alert("IOS收起键盘")
})    

 

focusin和focusout支持冒泡，对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡，focus和blur不会冒泡，这样就可以使用事件代理，处理多个输入框存在的情况。

 

ios系统上input输入框无法输入值

只要在input 元素或者父元素上面加上css样式 -webkit-user-select: text 就可以了。

<input style="-webkit-user-select: text;"/>

 

在IOS系统中输入光标过大的问题

① 在textarea中换行，第二行的光标会变大

line-height是行间距，在你只有一行字的时候，没有行间距，所以在只有一行的时候，第一行不高，有了第二行的时候就高了。

所以这种情况添加 line-height 属性就行了。 

<textarea style="line-height: 15px;" maxlength="100" rows="7"></textarea>

 

② input框的光标过大

问题也是同上面一样，设置一个合理的line-height值就可解决问题。

 

两个输入框之间切换时抖动

    其实2个输入框切换时 抖动的原因也很简单。例如我们在两个输入框之间切换，页面会首先触发 A 输入框 的 blur 事件，接着触发 B 输入框 的 focus 事件。

    这样的话，在 blur 时会触发我们的 window.scrollTo(0,0) 导致页面往下滚一下，接着 B 输入框 聚焦，于是键盘继续弹起，这导致页面再次向上移动。

    其实，在两个输入框之间切换这种操作时，我们就没必要触发第一个输入框 blur 时的 window.scrollTo 行为了。 
    因此看我们修改下我们的代码，让输入框切换这种操作发生时，可以切断第一个输入框的行为。这里我们用 setTimeout 来解决：

function inputBlur(e) {
    // 首先，判断触发事件的目标元素是否是input输入框，我们只关注输入框的行为。
    if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
        // 输入框失去焦点，要把IOS键盘推出页面的滚动部分还原。即将页面滚动到视窗顶部对齐
        this.timer = setTimeout(() => {
            console.log('timer触发')
            }, 0)
        }
    },
    
function inputFocus(e) {
    // 如果focus，则移除上一个输入框的timer
    if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
        clearTimeout(this.timer);
        }
    }

在ios里面，当一个文本框的样式为fixed时候，如果这个文本框获得焦点，它的位置就会乱掉，由于ios里面做了自适应居中，这个fixed的文本框会跑到页面中间。