WEB前端 | JS基础——(9-2)键盘事件

来源：互联网发布：2017eia原油库存数据编辑：程序博客网时间：2024/05/17 22:16
<!doctype html><html><head><meta charset="utf-8"/><title>键盘事件</title><style type="text/css"></style></head><body><form action="http://www.baidu.com" method="get"><input type="text" name="userName" required/><input type="submit" value="提交按钮"/></form></body><script type="text/javascript">var count = 0;// 键盘事件// onkeydown 键盘按下去的时候触发，如果长按，就会连续触发绑定的方法// onkeyup 键盘按下去并抬起来的时候触发，//document.onkeyup = function(ev) {//var evObj = window.event || ev;//// keyCode 是每个键盘事件的一个编码，可以改变//console.log(evObj.keyCode);//}document.onkeydown = function(ev) {var evObj = window.event || ev;if (evObj.keyCode == '13' && evObj.ctrlKey) {console.log('发表');}if (evObj.keyCode == '68' && evObj.shiftKey) {console.log('右移');}if (evObj.keyCode == '75' && evObj.shiftKey && evObj.altKey) {console.log('开始');}}// 长按p键 只触发一次var n = 0;document.onkeydown = function(ev) {var evObj = window.event || ev;n++;if (evObj.keyCode == '80' && n == 1) {count++;console.log(count);}}document.onkeyup = function() {n = 0;}//onkeypress 事件可以区分键盘输入的大小写字母document.onkeypress = function(ev){//使用onkeypress的时候，主要用于获取字母以及大小写，火狐等浏览器使用ev.which来获取var keyCode = ev.keycode || ev.which;console.log('点了键盘' + keyCode);}var form = document.getElementsByTagName('form')[0];// onsubmit 可以帮我们自定义一个表单提交事件，同时可以返回false来阻止默认的表单提交跳转。// 也可以使用ev.preventDefault() 来阻止跳转(IE6 - 8 不兼容)。form.onsubmit = function(ev) {console.log('表单要提交了');// return false;ev.preventDefault();}var userName = document.getElementsByTagName('input')[0];userName.onfocus = function() {console.log('聚焦');}userName.onblur = function() {console.log('失焦');// 让文本框聚焦userName.focus();}</script></html>
0 0