手机端注册流程细节学习

//获取当前屏幕宽度
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) 方法返回元素的高度（包括内边距、边框和外边距）。