表单事件

一 概念
```js
onfocus:获取焦点
onblur:失去焦点
onselect:文本被选中
oninput:值改变
onchange:值改变,且需要在失去焦点后才能触发
onsubmit:表单默认提交事件
```
二 代码示范

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>表单事件</title>
</head>
<body>
<form action="">
<input type="text" name="usr">
<button type="submit">提交</button>
</form>
<div></div>
</body>
<script type="text/javascript">
var form = document.querySelector('form');
var ipt = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');

ipt.onselect = function () {
console.log("文本被选中了");
}
// 值改变就触发
ipt.oninput = function () {
console.log("值在改变");
div.innerText = this.value;
}
// 键盘抬起触发
ipt.onkeyup = function () {
console.log("值在改变");
div.innerText = this.value;
}

// 丢失焦点触发
ipt.onchange = function () {
console.log("值在改变");
div.innerText = this.value;
}
// form的专有事件
form.onsubmit = function () {
console.log("提交");
return false;
}

</script>
</html>

 
posted @ 2018-10-18 18:39  不沉之月  阅读(158)  评论(0编辑  收藏  举报