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的文本框會跑到頁面中間。