onfocus获得焦点的时候触发
onblur 失去焦点的时候触发
能获得焦点的元素才能触发
input( 所有tepe类型都可以触发)、textarea、select、a、button...
应用：
onblur 失去焦点的时候判断表单里是否符合要求
常用的案例
定时器点到别一个网页时，原网页的定时器还会运行
<head>
<meta charset="UTF-8">
<meta name="Author" content="FengYu">
<title>1</title>
<style>
*{margin:0;padding:0;font-family: Microsoft YaHei,serif;}
li{list-style: none;}
</style>
</head>
<body>
<script>
var t = setInterval( function(){
document.title ++;
},500);
window.onblur = function (){
clearInterval( t );
};
window.onfocus = function (){
t = setInterval( function(){
document.title ++;
},500);
}
</script>
Animation.gif
.focus()通过js让元素获得焦点
<body>
<input type="text" id="inp">
<script>
var inp = document.getElementById( 'inp' );
document.onclick = function () {
inp.focus();
}
</script>
</body>
Animation.gif
页面上来焦点就自动在输入框里
<script>
var inp = document.getElementById( 'inp' );
inp.focus();
</script>
Animation.gif
onchange当表单控件内容发生改变的时触发 重点
输入框检测进入焦点和离开焦点时内容有没有变化
<input type="text" id="inp">
<script>
var inp = document.getElementById( 'inp' );
inp.onchange = function(){
console.log( 1 );
}
</script>
Animation.gif
<select name="" id="inp">
<option value="厦门">厦门</option>
<option value="泉州">泉州</option>
<option value="漳州">漳州</option>
</select>
<script>
var inp = document.getElementById( 'inp' );
inp.onchange = function(){
console.log( this.value );
}
</script>
Animation.gif
在表单里可以通过.name里的名字获取元素
<form id="inp" action="">
<input type="radio" name="rb">
</form>
<script>
var inp = document.getElementById( 'inp' );
inp.rb.onchange = function () {
alert( '已经改变了' );
}
</script>
Animation.gif
form.submit() js提交 //form对象 先获取
不需要通过点击后再提交，满足要求后就可以自己提交
网友评论