H5问题（1）

1. 解决iOS和安卓端关于点击空白处键盘不收起/收起的问题：

注释：‘search-input’为input输入框的类名

app.$data.searchList.inputVal为input输入框的value值

window.onload = function() {

        document.querySelector('body').addEventListener('touchend', function(e) {

            if(e.target.className != 'search-input') {

                if(app.$data.searchList.inputVal) {

                    document.querySelector('.search-input').blur();

                } else {

                    e.preventDefault();  //解决安卓端默认失去焦点问题（默认事件）

                    document.querySelector('.search-input').focus();

                }

            }

        });

    }

2. 判断iOS是否是刘海屏：

function testUA(str) {

    return navigator.userAgent.indexOf(str) > -1

}

var isNewIphone = window && testUA('iPhone') && window.screen.height >= 812 && window.devicePixelRatio >= 2;

3. 父元素注册的事件，子元素不触发

注释：'.choosed-shadow'为父元素

$('.choosed-shadow').on('click',function(e) {

        if(e.target.classList[0] == 'choosed-shadow'){     

             // 执行父元素自己的事件

        }

    })

4. 移动端屏幕熄黑之后点亮屏幕注意会触发的一些方法，针对该方法要做处理

5. 在执行一段脚本时，对dom的操作应当是即时生效的。dom操作确实都是同步的。但是因dom改变而触发的事件，以及其他一些效应（例如样式应用），很可能是异步的。所以，focus这里可能是有延迟的。也有人说脚本对dom的操作不是即时生效的，浏览器可能执行完当前脚本所有代码后才真正处理脚本中对dom的操作，focus必须延时一段时间才可以生效

setTimeout(function(){

            document.getElementById('input').focus();

        },100);

6. 禁止移动端屏幕放大

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

7. 解决移动端页面闪屏问题

html, body {  

        -webkit-tap-highlight-color:rgba(0,0,0,0);

    }

8. H5实现通话功能

< a href="tel:telephoneNumber">移动WEB页面JS一键拨打号码咨询功能</ a>

9. input输入框不用光标，不弹起键盘

<input readonly name='lbinput' οnfοcus="lbinput.blur()"></input>

10. input输入框获取焦点使光标出现在输入框最后一位，注意不能用于type为number中

var inputId = document.getElementById("searchinput")

inputId.selectionEnd = this.searchList.inputVal.length

11. 在一个type为text的输入框中，只允许输入数字，并且如果只输入整数，则只能输入六位，如果输入小数点，允许输入九位（使用 vue 的 watch 来实时监测输入的数据）

住：maxlength为输入框的长度限制字段，payCount为输入框的value值

watch: {

        payCount(newVal,oldVal){

            var reg = /^\d+(\.\d{0,3})?$/;

            if(!reg.test(newVal) && newVal){

                this.$set(this.$data,'payCount',oldVal);

            }else if (!newVal){

                this.$set(this.$data,'payCount','');

            }else{

                if(newVal.indexOf('.') > -1){

                    this.$set(this.$data,'maxlength',9)               

                } else if(newVal.length>6){

                    if(newVal.substr(6,1) == '.') {

                        this.$set(this.$data,'maxlength',9)

                    } else {

                        this.$set(this.$data,'maxlength',7)

                        this.$set(this.$data,'payCount',this.payCount.slice(0,6));

                    }

                }

            }       

        }

12. JQ页面用html方法去渲染页面内容的情况下，数据更新但是会导致页面没有更新

var html=template('mitem',data); $('#return_list').append(html);需要改成

var html=template('mitem',data);  $('#return_list').html(html);

13. 防止页面穿透滚动

打开内置元素

var scroll = $(window).scrollTop();                            

    $("html,body").css({                                

        "position":"fixed",                                

        "top":-scroll                            

    })

关闭

$("html,body").css({                                    

        "position":"static",   //去除相对于窗口的定位                            

    });                                

    $(window).scrollTop(scroll);

14. 输入框禁止输入空格，顿号和冒号，并且输入框最大限制长度为10

this.payTitle = this.payTitle.replace(/[`:：、]/g,"")

                    this.payTitle = this.payTitle.replace(/\s+/g,"")

                    if(this.payTitle.indexOf(' ')!==-1&&this.payTitle.length>10){

                        this.payTitle = this.payTitle.split(' ')[0]+this.payTitle.split(' ')[1]

                    }else {

                        this.payTitle= this.payTitle.slice(0,10)

                    }

15. 两个数组对象，其中一条数组对象去掉两个数组对象相同属性的一项

let newArr = item.formContent.filter((item) => {

                                return !formIsSelect.some(ele=>ele.keyName===item.keyName)

                            });

16.  标签类名设置背景图片

.img-box{

    width: 100%;

    height: 20rem;

    background-image:url("../img/bannerdi@2x.png");

    background-size: 100%;

}

17.window判断是否是返回到当前页面

window.addEventListener('pageshow', function (event) {

        if(event.persisted || window.performance && window.performance.navigation.type == 2){

            //点击返回按钮进入本页

            window.history.back();

        }

    },false);

18.  限制后退

    window.history.pushState(null, null, window.location.url)

    window.onpopstate = function (ev) {

        window.history.pushState(null, null, window.location.url)

    }

19.阿拉伯数字转换为中文数字

function changeNumToHan(num) {

    var arr1 = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']

    var arr2 = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿']

    if (!num || isNaN(num)) return '零'

    var english = num.toString().split('')

    var result = ''

    for (var i = 0; i < english.length; i++) {

      var des_i = english.length - 1 - i// 倒序排列设值

      result = arr2[i] + result

      var arr1_index = english[des_i]

      result = arr1[arr1_index] + result

    }

    result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十') // 将【零千、零百】换成【零】 【十零】换成【十】

    result = result.replace(/零+/g, '零') // 合并中间多个零为一个零

    result = result.replace(/零亿/g, '亿').replace(/零万/g, '万') // 将【零亿】换成【亿】【零万】换成【万】

    result = result.replace(/亿万/g, '亿') // 将【亿万】换成【亿】

    result = result.replace(/零+$/, '') // 移除末尾的零

    // 将【一十】换成【十】

    result = result.replace(/^一十/g, '十')

    return result

}

20.修改placeholder样式

.input_blurstyle::-webkit-input-placeholder {

    color: #FF5A5E !important;

    /* WebKit browsers */

}

.input_blurstyle:-moz-placeholder {

    color: #FF5A5E !important;

    /* Mozilla Firefox 4 to 18 */

}

.input_blurstyle::-moz-placeholder {

    color: #FF5A5E !important;

    /* Mozilla Firefox 19+  */

}

.input_blurstyle:-ms-input-placeholder {

    color: #FF5A5E !important;

    /*Internet Explorer 10+ */

}

21.  toLocaleDateString()方法存在兼容性问题

22.进页面就会去判断页面的长度（判断页面有无滚动条）

function hasScrollbar() {

    return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);

}

23.安卓机使用display:flex,justify-content:right,不生效时使用flex-direction: row-reverse;和display:flex搭配，确保样式展示在右边