手机端注册流程细节学习

//获取当前屏幕宽度
function setRem() {
	//获取到HTML文档
	var oHtml = document.querySelector('html');
	//获取当前屏幕大小，getBoundingClientRect返回一个对象
	var width = oHtml.getBoundingClientRect().width;
	console.log(oHtml.getBoundingClientRect())

	oHtml.style.fontSize = width / 16 + 'px';
}
window.onload = function() {
	setRem();
};

querySelector是类似于jquery选择器，选定的是html。

getBoundingClientRect 是会返回当前元素一个对象，包含相关信息

alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

同时文档中获取的是当前屏幕的宽度。

//

/*
 * 手机号码正则匹配
 */
var moblie = false;

function checkPho() {
	$("#registerTel").bind('input porpertychange', function() {
		var re = /^1[0-9]{10}$/;
		username = $("#registerTel").val();
		if(username != '') {
			$(".close").fadeIn();
			$("#registerTel").focus(function() {
				$(".close").fadeIn();
				$(".telTip").html('').css('margin-left', '0');
			}).blur(function() {
				setTimeout(function() {
					$(".close").fadeOut();
				}, 200);
			}).change(function() {
				if(!re.test(username)) {
					$(".telTip").html('手机格式不正确').css('margin-left', '2.66666667rem');
					moblie = false
				} else {
					$(".telTip").html('').css('margin-left', '0');
					moblie = true;
				}
			});
		}
	})
}

onpropertychange此属性可在某些情况下解决上面存在的问题，不用考虑是否失去焦点，不管js操作还是键盘鼠标手动操作，只要HTML元素属性发生改变即可立即捕获到。遗憾的是，onpropertychange为IE专属的

oninputHTML5中的标准事件，不过IE9以下的浏览器是不支持oninput事件的。

下次记住input框使用上述两种属性，以及相关写法。

---------------------------------------------------------------------------------------------------------------------------------

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。