JavaScript表单事件 获取焦点：focus 失去焦点：blur 输入事件：input 变化事件：change |
您所在的位置：网站首页 › 什么叫单焦点 › JavaScript表单事件 获取焦点：focus 失去焦点：blur 输入事件：input 变化事件：change |
|
JavaScript表单事件
焦点处理
焦点处理主要包括focus（获取焦点）和blur（失去焦点）事件类型。所谓焦点，就是激活表单字段，使其可以响应键盘事件。 获取焦点：focus当单击或使用Tab键切换到某个表单元素或超链接对象时，会触发该事件。focus事件是确定页面内鼠标当前定位的一种方式。在默认情况下，整个文档处于焦点状态，但是单击或者使用Tab键可以改变焦点位置。 示例：输入框被点击时触发，会在文本框后面提示“请输入11位手机号！！！” PhoneNumber: let inpEle = document.querySelector("input[type='text']"); let spanEle = document.querySelector("span"); //焦点事件(输入框被点击时触发) inpEle.addEventListener("focus", e => { spanEle.innerHTML = `请输入11位手机号！！！`; }); 失去焦点：blurblur事件类型表示在元素失去焦点时响应，它与focus事件类型是对应的，主要作用于表单元素和超链接对象 示例：输入框失去点击焦点时，会在文本框后面提示“请输入11位手机号！！！”，并且输入内容是非数字时，会提示“请输入数字！！!” PhoneNumber: 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); }); 输入事件inputinout事件类型在输入框有东西输入时响应，主要作用于表单元素输入的内容和设定的值相比较，可以和正则表达式一起连用来判断输入内容是否合法 示例：输入框输入手机号码，直到输入内容和正则表达式的值相等还时，便提示“输入正确！！！” form action=""> PhoneNumber: 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`; } }); 变化事件changechange事件类型在输入框输入的值变化时响应，当上一次输入的值和当前输入的值不同时便会触发，会多次触发事件 示例：输入框输入值前后两次不同的时候，都会提示“跟上次不一样！！！” form action=""> PhoneNumber: inpEle.addEventListener("change", e => { spanEle.innerHTML = "跟上次不一样！！！"; }); |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |