JavaScript表单事件

焦点处理

焦点处理主要包括focus（获取焦点）和blur（失去焦点）事件类型。所谓焦点，就是激活表单字段，使其可以响应键盘事件。

获取焦点：focus

当单击或使用Tab键切换到某个表单元素或超链接对象时，会触发该事件。focus事件是确定页面内鼠标当前定位的一种方式。在默认情况下，整个文档处于焦点状态，但是单击或者使用Tab键可以改变焦点位置。

示例：输入框被点击时触发，会在文本框后面提示“请输入11位手机号！！！”

<form action="">
     PhoneNumber:<input type="text" placeholder="input your phone number" maxlength="11">
      <span></span>
</form>
<script>
	let inpEle = document.querySelector("input[type='text']");
	let spanEle = document.querySelector("span");
 	//焦点事件(输入框被点击时触发)
 	inpEle.addEventListener("focus", e => {
     	spanEle.innerHTML =  `请输入11位手机号！！！`;
	});
</script>

失去焦点：blur

blur事件类型表示在元素失去焦点时响应，它与focus事件类型是对应的，主要作用于表单元素和超链接对象
示例：输入框失去点击焦点时，会在文本框后面提示“请输入11位手机号！！！”，并且输入内容是非数字时，会提示“请输入数字！！!”

<form action="">
     PhoneNumber:<input type="text" placeholder="input your phone number" maxlength="11">
      <span></span>
</form>
inpEle.addEventListener("blur", e => {
    let event = e  || window.event;
    let inputInfo = event.target.value;
    if(!isNaN(inputInfo)) {
        spanEle.innerHTML =  `请输入11位手机号！！！`;
    }else {
        spanEle.innerHTML = `请输入数字！！！`;
        spanEle.style.color = `red`;
    }
    console.log(inputInfo);
});

输入事件input

inout事件类型在输入框有东西输入时响应，主要作用于表单元素输入的内容和设定的值相比较，可以和正则表达式一起连用来判断输入内容是否合法
示例：输入框输入手机号码，直到输入内容和正则表达式的值相等还时，便提示“输入正确！！！”

form action="">
     PhoneNumber:<input type="text" placeholder="input your phone number" maxlength="11">
      <span></span>
</form>
inpEle.addEventListener("input", e => {
    let event = e || window.event;
    let inputInfo = event.target.value;
    let re = /^[1][3-9][0-9]{9}$/g;
    if (re.test(inputInfo)) {
        spanEle.innerHTML = `输入正确`;
        spanEle.style.color = `green`;
    } else {
        spanEle.innerHTML = `不正确！！！`;
        spanEle.style.color = `red`;
    }
});

变化事件change

change事件类型在输入框输入的值变化时响应，当上一次输入的值和当前输入的值不同时便会触发，会多次触发事件
示例：输入框输入值前后两次不同的时候，都会提示“跟上次不一样！！！”

form action="">
     PhoneNumber:<input type="text" placeholder="input your phone number" maxlength="11">
      <span></span>
</form>
inpEle.addEventListener("change", e => {
    spanEle.innerHTML = "跟上次不一样！！！";
});