表单事件
属性 描述
onfocus 元素获取焦点时触发
onblur 元素失去焦点时触发
onchange 该事件在表单元素的内容改变时触发( input, select, 和 textarea)
oninput 元素获取用户输入时触发
onselect 用户选取文本时触发 ( input 和 textarea)
onreset 表单重置时触发
onsubmit 表单提交时触发
//css部分
<div id="box">
<div>
<input type="text" onfocus="focusFn()" placeholder="获取焦点">
</div>
<div>
<input type="text" onblur="blurFn()" placeholder="失去焦点">
</div>
<div>
<select>
<option value="1">p1</option>
<option value="2" selected>p2</option>
<option value="3">p3</option>
<option value="4">p4</option>
</select>
</div>
<div>
<input type="text" onblur="inputFn(this)" placeholder="输入时触发">
</div>
<div>
<input type="text" onselect="selectFn(this)" placeholder="选择时触发">
</div>
<form onsubmit="submitFn()" onreset="resetFn()">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</div>
//script部分
<script type="text/javascript">
// 获取焦点
function focusFn(){
console.log("获取焦点");
}
// 失去焦点
function blurFn(){
console.log("失去焦点了");
}
// onchange
var sel = document.querySelector("select");
sel.onchange = function(){
console.log(this.value);
}
// 输入时触发
function inputFn(self){
console.log(self.value);
}
// 选择时触发
function selectFn(self){
console.log(self.value);
}
// 提交时触发
function submitFn(){
console.log('提交了');
}
// 重置时触发
function resetFn(){
console.log('重置了');
}
</script>