移動端開發，我選mui。
移動端選擇框插件，時間選擇插件，我選mui.picker。
但是，它的坑，你踩過幾次呢。
我不知道你踩過幾次，我只知道我就踩過一個坑。對的，只有一個，反饋給官方，也沒看到優化和修繕。
能咋辦，自食其力吧，我就自己搞了一個修繕版本的mui.picker.min.js。
坑是啥
這個事情是這樣的：頁面使用了選擇器，然後第一次使用選擇器後再馬上點擊頁面的任意一個輸入框，在輸入框獲取焦點彈出輸入法的時候頁面會出現滾動條，這個時候上拉滾動會出現選擇器插件。這個是個bug，bug，bug....
坑怎麼來的
這個事情是這樣的：當我們點擊選擇器，彈出選擇器，然後再點擊頁面的任意一個輸入框，這個過程沒有調用選擇器關閉事件（當我們使用選擇器的時候，可以在選擇器右上方看到關閉或者完成按鈕，這個按鈕就是關閉選擇器的作用）。原來是這麼個問題。
怎麼填坑
這個事情是這樣的：坑是因爲插件在失去焦點的時候不能自動關閉，所以只要在失去焦點的時候讓它關閉就可以填坑了。
失去焦點契機
這個事情是這樣的：我們懂的關閉選擇器，但是什麼時候關閉，所以我們需要了解選擇器什麼時候失去焦點。分析下，只有輸入框和文本框纔有機會讓選擇器失去焦點，好，找到契機了。
填坑動作
所以，只要在每個頁面裏頭，給每個input和textarea綁定獲取焦點的事件，在獲取焦點的時候，關閉選擇器，問題就解決了。
填坑代碼
因爲是要給mui.picker做補丁，而且要侵入mui-picker的源碼，所以我就直接在mui.picker.js裏頭直接添加補丁。主要補丁代碼如下（下面只是部分補丁代碼，還有部分需要寫入mui.picker的源碼裏頭）：
/**
* picker補丁，部分補丁放在原始的picker的插件代碼裏頭
* 掃地僧 20190401
*/
var futurePicker = {};
/**
* 給當前頁面的所有的input textarea對象添加獲得焦點監聽事件
*/
futurePicker.pickerList = function() {
var inputList = document.getElementsByTagName("input");
var textareaList = document.getElementsByTagName("textarea");
if (inputList) {
for (var i = 0, l = inputList.length; i < l; i++) {
inputList[i].onfocus = function() {
futurePicker.hidePicker()
}
}
}
if (textareaList) {
for (var i = 0, l = textareaList.length; i < l; i++) {
textareaList[i].onfocus = function() {
futurePicker.hidePicker()
}
}
}
}
/**
* 隱藏所有的picker對象
*/
futurePicker.hidePicker = function() {
var pickerObjList = document.querySelectorAll(".mui-poppicker");
if (pickerObjList) {
for (var i = 0, l = pickerObjList.length; i < l; i++) {
pickerObjList[i].style.visibility = "hidden";
}
}
var dtPickerObjList = document.querySelectorAll(".mui-dtpicker");
if (dtPickerObjList) {
for (var i = 0, l = dtPickerObjList.length; i < l; i++) {
dtPickerObjList[i].style.visibility = "hidden";
}
}
}
// 啓動補丁
futurePicker.pickerList();
附件