20-JavaScript的标单事件和键盘事件 DAY16 （04.28）

一、键盘事件

1.onkeydown 键盘上某个键，按下时添加

aBox[0].onkeydown=function(event){
console.log('onkeydown事件');
console.log(event.code);
}

2、onkeyup 键盘上某个键，松开时触发

aBox[1].onkeyup=function(event){
console.log('onkeyup事件');
console.log(event.code);
}

3.onkeypress 键盘上某个键，别按下并松开时触发（不识别上下左右 shift ctrl alt whitespace）

aBox[2].onkeypress=function(event){
console.log('onkeypress事件');
console.log(event.code);
}

4.点击提交

    <button></ button>有默认类型 type=submit;
     图片格式 默认可提交
     <form> </form>中默认提交功能

二、表单事件

1.oninput 输入事件元素获取用户输入时触发

aList[0].oninput=function(event){
console.log('oniput输入事件');
console.log(event);
}

2.onfocus元素获取到焦点时除触发

aList[1].onfocus=function(event){
console.log('onfocus输入事件');
console.log(event);
}

3.onbuler元素失去焦点时除触发

aList[2].onbuler=function(event){
console.log('onbuler输入事件');
console.log(event);
}

4.onsubmit 表单提交时触发（给Form整体）

oForm.onsubmit=function(event){
console.log('onsubmit输入事件');
console.log(event);
}

5.onreset 表单重置时触发（给Form整体 可获取焦点）

oForm.onreset=function(event){
console.log('onreset输入事件');
console.log(event);
}

6.onchange 改事件在表单内容改变时触（input,textarea,select.keygen）

aList[5].onchange=function(event){
console.log('onchange输入事件');
console.log(event);
}

7.onselect 用户选择文本时触发 （input textarea）

aList[6].onselect=function(event){
console.log('onselect输入事件');
console.log(event);
}

8.onsearch 用户向搜索域输入文本时触发（<intype="search"> 按回车或者'x'触发）

aList[7].onsearch=function(event){
console.log('onsearch输入事件');
console.log(event);
}

三、事件的补充

<style>
		input:focus{
			background-color: aqua;
		}
		h2::selection{
			color: aqua;
			background-color: antiquewhite;
		
			//使用其可以改变复制字体的样式
		}
		p{
			user-select: none;//用户不允许粘贴
		}
	</style>
</head>
<body>
	<h1>马跃磊是我的大儿</h1>
	<input type="text">
	<h2>马士洋是我的好二儿</h2>
	<p>马跃磊是我儿</p>
</body>
版权声明：本文为weixin_69290586原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。