• input中placeholder垂直居中
  在手機(jī)上顯示placeholder沒有垂直居中睦尽，有點偏下
  如果給input加padding型雳，光標(biāo)會變得和input一樣高，很丑
  最后找到了這種方法：
  設(shè)置line-height: 1.5就好

css
.form input{
    width: 100%;
    height: 0.4rem;
    line-height: 1.5;
    padding-left: 0.16rem;
    padding-right: 0.4rem;
    font-size: 0.16rem;
    color: #000;
}

• onkeyup無法監(jiān)聽到復(fù)制黏貼
  使用oninput事件

keypress 能監(jiān)聽鍵盤事件沿量，但鼠標(biāo)復(fù)制黏貼操作就無能為力
HTML5 出現(xiàn)的input事件： 只要輸入框內(nèi)容發(fā)生變化即可觸發(fā)（IE： propertychange）

• input輸入框每四位拼接空格

$input0.onkeyup =function() {
    this.value =this.value.replace(/\s/g,'').replace(/\D/g,'').replace(/(\d{4})(?=\d)/g,"$1 "); //只限輸入數(shù)字
};

$input1.onkeyup =function() {
    this.value =this.value.replace(/\s/g,'').replace(/(\w{4})(?=\w)/g,"$1 "); //只限輸入英文和數(shù)字

• input輸入框每四位拼接空格光標(biāo)問題
  從中間插入和刪除時冤荆，光標(biāo)會跑到最后

var isDelete = false;

// 獲取光標(biāo)位置
function getCursortPosition(textDom) {
    var cursorPos = 0;
    if (document.selection) {
        // IE Support
        textDom.focus();
        var selectRange = document.selection.createRange();
        selectRange.moveStart('character', -textDom.value.length);
        cursorPos = selectRange.text.length;
    } else if (textDom.setSelectionRange) {
        // webkit support
        textDom.focus();
        cursorPos = textDom.selectionStart;
    }
    return cursorPos;
}
 // 設(shè)置光標(biāo)位置
function setCaretPosition(textDom, pos) {
    if (textDom.setSelectionRange) {
        textDom.focus();
        textDom.setSelectionRange(pos, pos);
    } else if (textDom.createTextRange) {
        // IE Support
        var range = textDom.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

$input.oninput = function (e) {
  var elem = this;
    setTimeout(function(){
        var str = elem.value;
        var currentPos = getCursortPosition(elem);
        var posAfterText = "";
        var posPreText = "";
        var isNextBlank = false;//后面的是否是空格
        var isPreBlank = false;
        var isLastPos = true;
        if (currentPos != str.length) {//不是最后一個
            posAfterText = str.substr(currentPos, 1);
            posPreText = str.substr(currentPos - 1, 1);
            isNextBlank = /^\s+$/.test(posAfterText);
            isPreBlank = /^\s+$/.test(posPreText);
            isLastPos = false;
        }
        // if(elem.value.length <= $(elem).attr("maxlength")){//最大長度控制
        // elem.value = elem.value.replace(/\s/g, '').replace(/(\w{4})(?=\w)/g, "$1 ");
        // elem.value =elem.value.replace(/\s/g,'').replace(/\D/g,'').replace(/(\d{4})(?=\d)/g,"$1 ");
        elem.value =elem.value.replace(/\s/g,'').replace(/[^\w\.\/]/g,'').replace(/(\w{4})(?=\w)/g,"$1 ");
        // }
        if (isDelete) {
            if (isPreBlank) {
                setCaretPosition(elem, currentPos - 1);
            } else {
                setCaretPosition(elem, currentPos);
            }
        } else {
            if (!isLastPos) {
                if (isNextBlank) {
                    setCaretPosition(elem, currentPos + 1);
                } else {
                setCaretPosition(elem, currentPos);
                }
            } else {
                setCaretPosition(elem, elem.value.length);
            }
        }
    },0);
}

$input.onkeydown =function() {
    isDelete = window.event.keyCode == 8;//標(biāo)記用戶進(jìn)行刪除操作
};

• 頁面返回刷新問題
  pageshow
  onpageshow 事件在用戶瀏覽網(wǎng)頁時觸發(fā)乌妒。
  onpageshow 事件類似于 onload 事件撤蚊，onload 事件在頁面第一次加載時觸發(fā)坐榆， onpageshow 事件在每次加載頁面時觸發(fā)，即 onload 事件在頁面從瀏覽器緩存中讀取時不觸發(fā)匹中，此外還有pagehide在不顯示的時候觸發(fā)豪诲。

window.addEventListener('pageshow', function(event) {
    if(event.persisted) { // ios 有效, android 和 pc 每次都是 false
        // location.reload();
        $input0.value = '';
        $input1.value = '';
    } else { // ios 除外
        if(sessionStorage.getItem('refresh') === 'true') { //結(jié)合sessionStorage
            // location.reload();
            $input0.value = '';
            $input1.value = '';
        }
    }
    sessionStorage.removeItem('refresh');
});
//頁面跳轉(zhuǎn)時存sessionStorage
sessionStorage.setItem('refresh', 'true');