document.addEventListener(keydown, keyDownHandler, false);function keyDownHandler(event){// 屏蔽Alt + 方向键if((event.altKey) &&((event.keyCode == 37) || (event.keyCode == 39))){console.log(不能使用Alt+方向键前进或后退网页);event.preventDefault();}// 屏蔽退格删除键和F5刷新键if((event.keyCode == 8) || (event.keyCode == 116)){event.preventDefault();}// 屏蔽Ctrl + nif((event.ctrlKey) && (event.keyCode == 78)){event.preventDefault();}// 屏蔽F11 , 即全屏if(event.keyCode == 122){event.preventDefault();}// 以下为禁止查看网页源代码 , 即禁用// F12、Ctrl+Shift+I、Ctrl+u及鼠标右击// 屏蔽Ctrl + u , 即查看源文件if((event.ctrlKey) && (event.keyCode == 85)){console.log(no no);event.preventDefault();}// 屏蔽Shift + F10 , 即网页菜单if((event.shiftKey) && (event.keyCode == 121)){event.preventDefault();}// 屏蔽F12if(event.keyCode == 123){event.preventDefault();}// 屏蔽Ctrl + Shift + Iif(event.ctrlKey && event.shiftKey && (event.keyCode == 73)){event.preventDefault();}}// 屏蔽鼠标右键document.addEventListener(contextmenu, function(event){event.preventDefault();},false);字符编码charCode属性:该属性返回 keypress 事件触发时按下的字符键的字符Unicode值 , 在其他事件中返回0;该事件已被DOM3废弃 , 推荐使用key属性代替它 , 但至今 , 所有浏览器都还支持;
txt.addEventListener(keypress, function(event){console.log(keyCode: + event.keyCode);console.log(charCode: + event.charCode); // 两者值一样});在keypress事件中 , keyCode属性返回值(也是字符编码 , 因此它)与charCode一致;
IE8及以下和低版本的opear不支持charCode属性 , 它们是在发生keypress事件对象的keyCode中保存Unicode编码;
另外 , 某些低版本的浏览器在产生非打印字符时也会触发keypress事件 , 但此时其charCode值为0 , 为此可以检测其charCode属性值为0的情况;
特别要注意 , 通过中文输入法输入的字符 , 不会触发keypress事件 , 但会触发keydown及keyup事件 , 不过 , 事件对象的charCode为0 , 而keyCode总是返回229;
跨浏览器取得字符编码 , 添加到eventutil.js文件中:
getCharCode: function(event){if(typeof event.charCode == number)return event.charCode;elsereturn event.keyCode;}应用:
EventUtil.addHandler(txtInput, keypress, function(event){event = EventUtil.getEvent(event);console.log(EventUtil.getCharCode(event));});which属性:返回一个键按下时的字符码(charCode) , 可以发生在keydown、keyup和keypress事件中;如:
var txt = document.getElementById(txt);txt.addEventListener(keypress, function(event){console.log(event.which);console.log(event.charCode);},false);在keypress事件中 , 其行为与值与charCode一致 , 在keydown及keyup事件中可以返回所有键的UniCode编码;
IE8 及其更早版本不支持 which 属性 , 不支持的浏览器可使用 keyCode 属性;另外 , keyCode属性在Firefox的onkeypress事件中是无效的 , 所以 , 兼容这些浏览器可以:
var x = event.which || event.keyCode;在DOM3事件标准中 , 已删除这个属性了 , 但所有的浏览器都支持该属性;
示例:
var username = document.getElementById(username);var userpwd = document.getElementById(userpwd);username.addEventListener(keydown, function(event){var keyCode = event.which ? event.which : event.keyCode;if(keyCode == 13)userpwd.focus();});userpwd.addEventListener(keydown, function(event){var keyCode = event.which ? event.which : event.keyCode;if(keyCode == 13)login();elsereturn false;});function login(){console.log(登录);}key属性:DOM3级事件对键盘事件做出了一些改变 , 删除了keyCode、charCode和which属性 , 增加了新属性:key , 用于获取键名;
console.log(event.key);key属性是为了取代keyCode而新增的 , 它的值就是相应的文本字符(如“a”或“A”) , 就是键名 , 在按下非字符键时 , key的值是相应键的名(如“Shift”或“Down”);
示例:验证一个电话号码 , 只接受数字、+、()、-、ArrowLeft、ArrowRight、Delete或Backspace , 如:
txt.addEventListener(keydown, function(event){var key = event.key;var result = (event.key = 0 && event.key = 9) ||[+,(,),-,ArrowLeft,ArrowRight,Delete,Backspace].includes(event.key);if(!result)event.preventDefault();});示例:使用按键移动元素:
style#mouse {display: inline-block;cursor: pointer;margin: 0;}#mouse:focus {outline: 1px dashed black;}/stylep单击选中图案 , 并使用方向键移动/ppre id=mouse__(q_/p)/. .=_t_/=__/((()))/) (//Y/-nn^nn/prescriptmouse.tabIndex = 0;mouse.onclick = function() {this.style.left = this.getBoundingClientRect().left + px;this.style.top = this.getBoundingClientRect().top + px;this.style.position = fixed;};mouse.onkeydown = function(e) {switch (e.key) {case ArrowLeft:this.style.left = parseInt(this.style.left) - this.offsetWidth + px;return false;case ArrowUp:this.style.top = parseInt(this.style.top) - this.offsetHeight + px;return false;case ArrowRight:this.style.left = parseInt(this.style.left) + this.offsetWidth + px;return false;case ArrowDown:this.style.top = parseInt(this.style.top) + this.offsetHeight + px;return false;}};/script所有浏览器都支持key属性 , IE还支持一个char属性 , 其作用与key类似 , 但只有字符键才返回值;
- 探云空调是什么牌子
- 美的空调c5是什么意思
- 显卡独显是什么样的 显卡独显是什么意思
- 空调内机风扇不转是什么原因
- 电视在播放中突然黑屏是什么原因
- menu键是什么意思 MENU是什么功能键
- ffu是什么意思 /FF是什么意思
- 962464用九键打出来是什么意思
- 莱万是什么级别 莱万是哪国的
- 京东闪付用的是什么钱