H5小技巧（一）（常用移动端点击事件整理、input 键盘遮挡问题，监听物理返回键）

input、textarea 移动端自动滚动啊可视区域

const activeElement = document.activeElement
 if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
	 setTimeout(() => {
		activeElement.scrollIntoView()
	 }, 100)
	 }
 })
#**########################方法二####################################  2.
$(function() {
	//微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法 
	window.addEventListener("resize", function() {
		// alert("sdf")
		if(document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
			window.setTimeout(function() {
				document.activeElement.scrollIntoViewIfNeeded();
			}, 100);
		}
	})
})

移动端点击事件

1. click事件

单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟

2. touch类事件

触摸事件，有touchstart touchmove touchend touchcancel 四种之分

touchstart：手指触摸到屏幕会触发

touchmove：当手指在屏幕上移动时，会触发

touchend：当手指离开屏幕时，会触发

touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件

例子：

obj.addEventListener('touchstart', 函数名);//触摸开始
obj.addEventListener('touchmove', 函数名);//触摸移动
obj.addEventListener('touchend', 函数名);//触摸结束

3. tap类事件

触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分

tap: 手指碰一下屏幕会触发

longTap: 手指长按屏幕会触发

singleTap: 手指碰一下屏幕会触发

doubleTap: 手指双击屏幕会触发


4. swipe类事件

滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分

swipe：手指在屏幕上滑动时会触发

swipeLeft：手指在屏幕上向左滑动时会触发

swipeRight：手指在屏幕上向右滑动时会触发

swipeUp：手指在屏幕上向上滑动时会触发

swipeDown：手指在屏幕上向下滑动时会触发

IE 下input placeholder 不显示

 $(function () {
    if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder
        $('[placeholder]').focus(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function() {
            var input = $(this);
            if (input.val() == '' || input.val() == input.attr('placeholder')  ) {
                input.addClass('placeholder');
                if(input[0].tagName=="TEXTAREA")
                    input.text(input.attr('placeholder'));
                else
                    input.val(input.attr('placeholder'));
            }
        }).blur();
    };
    function placeholderSupport() {
        return 'placeholder' in document.createElement('input');
    }
    $(".accordions dt").on("click",function(){
        if(!$(this).parent().hasClass("expand")){
            $(this).siblings("dt").removeClass("active")
            $(this).toggleClass("active")
            var target = $(this).next("dd");
            target.siblings("dd").slideUp();
            target.slideToggle();
        }
    });
})

监听手机物理返回键

<!-- 监听手机返回键 -->

	
	function addEventBack(){
	  	pushHistory(); 
	  	window.addEventListener("popstate",addBackKey, false); 
	   	function pushHistory() { 
	       	var state = { 
	          	 title: "title", 
	          	 url: "#"
	       	}; 
	       window.history.pushState(state, "title", "#jjjj"); 
	  	 }
	}
					
	function addBackKey(){
		var ua = navigator.userAgent.toLowerCase(); //判断是ios 还是 安卓
		
		if (/iphone|ipad|ipod/.test(ua)) {
		    window.webkit.messageHandlers.BackClick.postMessage(null);
		} else {
		    event.preventDefault();
		    window.finish.doFinish();
		}
	}
	$(function(){
		if(localStorage.getItem("isshopapp") != null ){
		}else{				
			var ua = navigator.userAgent.toLowerCase(); //判断是ios 还是 安卓
			if (/iphone|ipad|ipod/.test(ua)) {
			    
			} else {
			    addEventBack();
			}
		}
		
	})