手机端注册流程细节学习

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







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值