在input里输入（指定个数的数字）电话号码，同时在另一个盒子里放大显示出同样的内容

棒棒糖~要原味的，敲代码是认真的！ 干货奉上*-*

先看结果图：

这是淘宝首页充话费里面的一个小功能。

功能需求：

• 用户点击输入框，在下方出现一个显示框
• 用户只能输入数字，输入其他内容无效
• 用户最多输入11个数字（因为手机号码是11位数字组成）
• 用户输入的内容，在显示框内放大显示成号码格式，即123-4567-8910
• 输入完成后，显示框消失
• 输入框失去焦点时，显示框消失
• 用户输入一半，点击了别的位置，导致输入框失去焦点。当用户没清除之前输入的内容，想继续输入时，点击输入框，可以接着输入内容

JS代码和解读：

//充话费--输入手机号
//获取元素
var rb4b1c_02 = document.getElementById('rb4b1c_02');
//rb4b1c_02是包裹住input输入框的一个盒子，input是它的一个字节点
var autoc = document.getElementById('autoc');
//autoc是显示框
//用户点击输入框，在下方出现一个显示框
rb4b1c_02.children[0].addEventListener('focus', function() {
	autoc.style.display = 'block';
	//console.log(autoc.innerHTML);为了检测是否有显示方面的bug
});
//用户开始输入内容
//思路 输入时 把input的内容 赋值给 显示框
//注册键盘事件
//这里的rb4b1c_02.children[0]就是input输入框
rb4b1c_02.children[0].addEventListener('keyup', function() {
	//console.log(this.value); 为了测试输入字符时 字符会不会显示
	var n = this.value.length;
	//this.value.length就是input输入框输入的数字个数
	//这个量比较长 所以用变量n来代替它做下面的事情

	//手机号是11位数字 
	//首先要判断输入的是否为数字 不是数字 就删除掉这个字符 不让它显示出来
	if(isNaN(this.value)) {
		//console.log(1);
		//如果输入的不是整数 就删除输入的字符
		//str.slice(i，num) 就是从字符串str中取索引号i到num的一串字符
		//把取出来的这段字符串 再赋值给输入框的内容
		this.value = this.value.slice(0, n-1);
		//把输入框的内容 赋值给 显示框
		autoc.innerHTML = this.value;
	} else {
	//用户只能输入11位数字 所以要对长度进行判断
	//因为显示框里的显示是有格式的 所以判断长度的同时 要给显示框内容加上字符
		//console.log(0);
		//autoc.innerHTML = this.value;
		//判断输入的长度 如果达到11位数字了 就停止输入
		//停止输入就是只截取前面11位数字 
		//再简化一下 就是不管输入多少 只截取前面11位数字赋值给显示框
		
		//同时 因为autoc的内容显示格式是123-4567-7891
		//所以需要加个判断
		if(n < 3) {
			autoc.innerHTML = this.value;
		} else if(n == 3) { 
			autoc.innerHTML = this.value + '-';
		} else if(n>3 && n<7) {
			autoc.innerHTML = this.value.slice(0, 3) + '-' + this.value.slice(3);
		} else if(n == 7) {
			autoc.innerHTML = this.value.slice(0, 3) + '-' + this.value.slice(3, 7) + '-';
		} else if(n>7 && n<11) {
			autoc.innerHTML = this.value.slice(0, 3) + '-' + this.value.slice(3, 7) + '-' + this.value.slice(7, 11);
		}else {
			this.value = this.value.slice(0, 11);
			//意思是input输入框里只截图前面11个数字来显示 11位之后的数字就不再显示了 相当于只能输入11位数
			autoc.innerHTML = this.value.slice(0, 3) + '-' + this.value.slice(3, 7) + '-' + this.value.slice(7, 11);
			//输入完成 显示框消失
			autoc.style.display = 'none';
		}
	}
	//autoc.innerHTML = this.value;
	//因为autoc的内容显示格式是123-4567-7891
	//所以需要加个判断
	
});
//失去焦点 显示框隐藏
rb4b1c_02.children[0].addEventListener('blur', function() {
	autoc.style.display = 'none';
});

                          **<- - End - ->**