移动端项目前端小结（二）

移动端点击延迟

　　移动端的点击事件或有300ms延迟，如果用的是jq框架，可以搭配fastclick插件解决延迟问题：

　　1、下载引入fastclick.js

　　2、jq版使用

$(function(){
　　FastClick.attach(document.body);
})

　　若用zepto框架就不用考虑这个问题。

移动端软键盘兼容

　　1、Android和IOS在唤起键盘和收起键盘大体上是一致的：input控件获得焦点时键盘呼起，失去焦点时键盘收起。

　　2、但是 键盘起来后，Android和IOS的表现会不一样。一般情况下，IOS的页面会自动往上滚动一点，Android不会。键盘收起后，Android的input控件存在不会失去焦点的情况(比如点击键盘上的收起按钮。)；IOS也存在页面没有自动往下滚动还原的情况。

　　3、如果有元素是定位在页面底部的，键盘呼起后元素会被键盘顶上来，这一点要注意。

　　4、Android小米浏览器下，输入框依旧被输入法遮挡问题

　　以下软键盘兼容代码：摘自：1、移动端软键盘兼容方案；   2、 可能这些是你想要的H5软键盘兼容方案

// 判断设备类型
var judgeDeviceType = function () {
	var ua = window.navigator.userAgent.toLocaleLowerCase();
	var isIOS = /iphone|ipad|ipod/.test(ua);
	var isAndroid = /android/.test(ua);
	var isMiuiBrowser = /miuibrowser/.test(ua);
	return {
		isIOS: isIOS,
		isAndroid: isAndroid,
		isMiuiBrowser: isMiuiBrowser
	}
}()

// 获取到焦点元素滚动到可视区
function activeElementScrollIntoView(activeElement, delay) {
	console.log('当前编辑框滚动到可视区域')
	var editable = activeElement.getAttribute('contenteditable')

	// 输入框、textarea或富文本获取焦点后没有将该元素滚动到可视区
	if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {
		setTimeout(function () {
		  activeElement.scrollIntoView();
		}, delay)
	}
}

// 监听输入框的软键盘弹起和收起事件
function listenKeybord($input,focusCb,blurCb) {
	if (judgeDeviceType.isIOS) {
		// IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
		$input.addEventListener('focus', function () {
		  console.log('IOS 键盘弹起啦！');
		  // IOS 键盘弹起后操作   执行input聚焦后的动作
		  focusCb(); 

		  //所有定位在页面底部的按钮统一一个类名listenKeybordBtn，键盘弹起后隐藏
		  $('.listenKeybordBtn').css('display', 'none'); 
		}, false)

		// IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
		$input.addEventListener('blur', () => {
		  console.log('IOS 键盘收起啦！');
		  // IOS 键盘收起后操作   执行input失去焦点后的动作
		  blurCb();
		  $('.listenKeybordBtn').css('display', 'block');

		  // 微信浏览器版本6.7.4+IOS12会出现键盘收起后，视图被顶上去了没有下来
		  var wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
		  if (!wechatInfo) return;
		  var wechatVersion = wechatInfo[1];
		  var version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
		  if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
		    window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
		  }
		})
	}

	// Andriod 键盘收起：Andriod 键盘弹起或收起页面高度会发生变化，以此为依据获知键盘收起
	if (judgeDeviceType.isAndroid) {
		var originHeight = document.documentElement.clientHeight || document.body.clientHeight;

		window.addEventListener('resize', function () {
		  var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
		  if (originHeight < resizeHeight) {
		    console.log('Android 键盘收起啦！');
		    // 修复小米浏览器下，输入框依旧被输入法遮挡问题
		    if (judgeDeviceType.isMiuiBrowser) {
		      document.body.style.marginBottom = '0px';
		    }
		    //所有定位在页面底部的按钮统一一个类名listenKeybordBtn，键盘收起后显示
		    $('.listenKeybordBtn').css('display', 'block');
		   	 blurCb()
		  } else {
		    console.log('Android 键盘弹起啦！');
		     // 修复小米浏览器下，输入框依旧被输入法遮挡问题
		    if (judgeDeviceType.isMiuiBrowser) {
		      document.body.style.marginBottom = '40px';
		    }
		    $('.listenKeybordBtn').css('display', 'none');
		    focusCb()
		  	activeElementScrollIntoView($input, 1000);  //键盘弹起编辑框滚动到可视区域
		  }
		  originHeight = resizeHeight;
		}, false)
	}
}

let phinput=$('input[name="phone"]');
//input控件聚焦和失去焦点有动作时
listenKeybord(phinput[0],function(){
	console.log(' 键盘弹起啦！');
   	//聚焦时的处理

},function(){
	console.log('键盘收起啦！');
	//失去焦点时的处理

})

以上移动端软键盘兼容代码注意点

　　部分Android机下表单元素点击、聚焦会自动触发window的resize事件，比如file类型的input发生点击时就会触发。因此，上边的软键盘兼容在只有一个input时运行不会出错；若有多个表单控件绑定点击事件时则需要再进一步兼容。

var listenKeybordFlag='Mi'

// 判断设备类型
//...
//同上

// 获取到焦点元素滚动到可视区  同上


// 监听输入框的软键盘弹起和收起事件，添加了参数x用以标识当前触发window的resize事件是哪个表单控件
function listenKeybord($input,focusCb,blurCb,x) {
	if (judgeDeviceType.isIOS) {
		//IOS部分不变
	}

	// Andriod 键盘收起：Andriod 键盘弹起或收起页面高度会发生变化，以此为依据获知键盘收起
	if (judgeDeviceType.isAndroid) {
		var originHeight = document.documentElement.clientHeight || document.body.clientHeight;
		window.addEventListener('resize', function () {
		  　var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
　　　　　　　if(listenKeybordFlag==x){
　　　　　　　　　;
　　　　　　　}else{　　
　　　　　　　　　return false;
　　　　　　　}

		  if (originHeight < resizeHeight) {
		    console.log('Android 键盘收起啦！');
		    // 修复小米浏览器下，输入框依旧被输入法遮挡问题
		    if (judgeDeviceType.isMiuiBrowser) {
		      document.body.style.marginBottom = '0px';
		    }
		    //所有定位在页面底部的按钮统一一个类名listenKeybordBtn，键盘收起后显示
		    $('.listenKeybordBtn').css('display', 'block');
		   	 blurCb()
		  } else {
		        console.log('Android 键盘弹起啦！');
		         // 修复小米浏览器下，输入框依旧被输入法遮挡问题
		        if (judgeDeviceType.isMiuiBrowser) {
		              document.body.style.marginBottom = '40px';
		        }
		        $('.listenKeybordBtn').css('display', 'none');
		        focusCb()
　　　　　　      if(listenKeybordFlag==x){
　　　　　　　        activeElementScrollIntoView($input,100)
　　　　　　      }
		  }
		  originHeight = resizeHeight;
		}, false)
	}
}
　$('#ideatxt').click(function(event) { 
　　　　listenKeybordFlag='ideatxt'
　});
　$('#numDay').click(function(event) {
　　　　listenKeybordFlag='numDay'
　});

listenKeybord($('#ideatxt')[0],function(){;},function(){;},'ideatxt')

listenKeybord($('#numDay')[0],function(){;},function(){
　　if(listenKeybordFlag=='numDay'){

　　　　//失去焦点的事件

　　}
},'numDay')        

IF()条件判断　

 　　当条件语句为数字0,空字符串'',undefined,null,false时为假。