表单事件
- 表单基本布局
<form action="" class="user-reg">
<label class="form-item">
<strong>用户名：</strong>
<p>
<input type="text" name="username">
</p>
</label>
<label class="form-item">
<strong>密码：</strong>
<p>
<input type="text" name="psw">
</p>
</label>
<label class="form-item">
<strong>简介：</strong>
<p>
<textarea name="des" id="" cols="30" rows="4"></textarea>
</p>
</label>
<label class="form-item">
<p class="form-btn">
<button type="button">注册</button>
<button type="button">重置</button>
</p>
</label>
</form>
- 自动获取焦点 在登陆注册界面自动获取焦点 焦点事件：除了可以获得光标的元素有此事件外，window也有这个事件
var oForm = document.querySelector('.user-reg'),
oUserName = oForm.querySelector('input[name=username]'),//使用css选择器的方式获取
oPassword = oForm.querySelector('input[name=psw]'),
oNum = oForm.querySelector('input[name=num]'),
oDes = oForm.querySelector('textarea'),
oLike = oForm.querySelector('select'),
oBtnBox = oForm.querySelector('.form-btn'),
oBtns = oBtnBox.querySelectorAll('button');
//监听获取焦点事件
oUserName.addEventListener("focus",function () {
console.log("获取焦点");
})
主动触发
oUserName.focus();
聚焦事件 onfocus 除了鼠标能触发 tab键也能
oUserName.onfocus =function(){
console.log(3333);
}
- 失去焦点 多用于保存文档 失去焦点就发送给后台 防止意外事件比如断电 必须先获得才能失去
//失去焦点
oUserName.addEventListener("blur",function () {
console.log("获取焦点");
})
主动触发
oUserName.blur();
当输入个数大于10 失去焦点不能再点击输入 点确定就不能更改
oUserName.addEventListener("focus",function () {
console.log("获取焦点");
if (this.value.length>=10){
this.blur();//主动失去焦点
}
});
在获取焦点之后三秒之后主动失去焦点
oUserName.addEventListener("blur",function () {
console.log("获取焦点");
setTimeout(function () {
oUserName.blur()
},3000)
});
失焦事件 onblur
3.监听内容改变（要有光标对象） 内容改变并且失去焦点触发 必须同时满足 执行顺序是先onchange然后onblur
oUserName.addEventListener("change",function () {
oUserName.addEventListener("change",function () {
if (parseInt(this.value)) {
this.value=parseInt(this.value);
}else{
this.value=0;
alert("请输入数字");
}
})
})
改变事件 onchange
内容改变就会触发（能获得焦点光标） 没有任何前提 oninput 不兼容IE 可以监听键盘
oUserName.oninput =function(){
if (this.value.length>=4){
alert("不能再输入了");
};
- 提交的两种方式
- 表单上按回车键
- button 的类型为submit
<button type="submit">注册</button>
oForm.addEventListener("submit",function () {
console.log(111)
});
点击提交之后其实打印了 但是控制台上没有 是因为刷新页面了
oForm.addEventListener("submit",function (e) {
e.preventDefault();
console.log(111)
});
这样就不会刷新页面
主动触发点击事件
oBtns = oBtnBox.querySelectorAll('button');
oBtns[0].addEventListener("click",function () {
oForm.submit();
})
- 监听重置事件 默认重置刷新页面
oForm.addEventListener("reset",function (e) {
console.log("重置表单");
})
取消默认刷新 提交之后可以打印 并且重置刷新页面
oForm.addEventListener("submit",function (e) {
e.preventDefault();
console.log("提交了");
this.reset();//主动重置
});
键盘事件 有焦点之后才能触发
文档是例外
document.addEventListener("keydown",function () {
console.log("文档")
})
按键盘会触发
- 键盘按下 keydown 按下不放会一直触发
oDes.addEventListener("keydown",function () {
console.log("键盘按下");
})
- 键盘松开 keyup 按下触发一次
oUserName.addEventListener("keyup",function () {
if (this.value.length>5){
alert("no");
}
})
- 键盘对应的数字
document.addEventListener("keydown",function (e) {
console.log(e.keyCode);
})
两个键同时按则有先后顺序打印
- 键盘输入 只有当按下键盘并有内容输入
oDes.addEventListener("keypress",function (e) {
console.log("键盘输入");
})
按上下左右不会触发 空格会当作内容会触发 打中文也不会触发
键盘上有三个特殊键 ctrl shift alt
event.ctrlKey
true 真表示按下
false 假表示没被按下
event.altKey
evenftKey
键盘按下怎样只打印一次？
document.stateKeyCode = [];
document.addEventListener("keydown",function (e) {
if (document.stateKeyCode[e.keyCode] ==true){
return false;
}
console.log(e.keyCode);
document.stateKeyCode[e.keyCode]=true;
});
document.addEventListener("keyup",function (e) {
document.stateKeyCode[e.keyCode]=false;
})
多个键位判断 方位判断
document.addEventListener("keydown",function (e) {
switch (e.keyCode){
case 38://上
console.log("上");
break;
case 40://xia
break;
case 37://zuo
break;
case 39://you
break;
default:
console.log("qita");
break
}
});