h5移动端开发经验积累篇

h5键盘控制

const el = document.documentElement || document.body
        const originHeight = el.clientHeight
        window.addEventListener(‘resize‘, () => {
            const resizeHeight = el.clientHeight
            if (resizeHeight < originHeight) {
                console.log(‘键盘弹起‘)
            } else {
                console.log(‘键盘收起‘)
                // const likeArray = document.getElementsByClassName(‘input-hook‘)
                // Array.from(likeArray, input => input.blur())
            }
        }, false)

h5热启动控制

　　　　 let i = 0
        var hiddenProperty = ‘hidden‘ in document ? ‘hidden‘ : 
　　　　　　　　　　‘webkitHidden‘ in document ? ‘webkitHidden‘ : 
　　　　　　　　　　‘mozHidden‘ in document ? ‘mozHidden‘ : 
　　　　　　　　　　null;
        var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, ‘visibilitychange‘);
        let that = this
        var onVisibilityChange = function(){
        　　if (!document[hiddenProperty]) { 
　　　　　　　　　　// 进入页面
        　　}else{
　　　　　　　　　　//离开页面
        　　}
        }
        document.addEventListener(visibilityChangeEvent, onVisibilityChange);

h5光标控制

getCursor (el) {
            if (window.getSelection) {
                el.focus()
                const sel = getSelection()
                sel.selectAllChildren(el)
                sel.collapseToEnd()
            } else if (document.selection) {
                var range = document.selection.createRange()// 创建选择对象
                range.moveToElementText(el)// range定位到el
                range.collapse(false)// 光标移至最后
                range.select()
            }
        }