H5 移动端问题总结

• input中placeholder垂直居中
  在手机上显示placeholder没有垂直居中，有点偏下
  如果给input加padding，光标会变得和input一样高，很丑
  最后找到了这种方法：
  设置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无法监听到复制黏贴
  使用oninput事件

keypress 能监听键盘事件，但鼠标复制黏贴操作就无能为力
HTML5 出现的input事件： 只要输入框内容发生变化即可触发（IE： propertychange）

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

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

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

• input输入框每四位拼接空格光标问题
  从中间插入和删除时，光标会跑到最后

var isDelete = false;

// 获取光标位置
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;
}
 // 设置光标位置
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;//标记用户进行删除操作
};

• 页面返回刷新问题
  pageshow
  onpageshow 事件在用户浏览网页时触发。
  onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发，此外还有pagehide在不显示的时候触发。

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') { //结合sessionStorage
            // location.reload();
            $input0.value = '';
            $input1.value = '';
        }
    }
    sessionStorage.removeItem('refresh');
});
//页面跳转时存sessionStorage
sessionStorage.setItem('refresh', 'true');