初识document.onkeydown及其兼容性问题

看导师的代码,写得还真不错。。。

就是复杂啊,全是JSP,我倒。。。


不说废话了,刚学到个小知识点:在js中用:document.onkeydown来对用户敲击键盘事件进行监听,在网上整理了点,现将资料集中于此。


概念onkeypress、onkeyup、onkeydown区别:


onkeypress 这个事件在用户按下并放开任何字母数字键时发生。系统按钮(例如,箭头键和功能键)无法得到识别。 
onkeyup 这个事件在用户放开任何先前按下的键盘键时发生。
onkeydown 这个事件在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生。


小demo:只在在输入的时候可以用backspace,其他地方不可以用。

<script type="text/javascript">  
//处理键盘事件  
function doKey(e){  
    var ev = e || window.event;//获取event对象  
    var obj = ev.target || ev.srcElement;//获取事件源  
    var t = obj.type || obj.getAttribute('type');//获取事件源类型  
    if(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea"){  
        return false;  
    }  
}  
//禁止后退键 作用于Firefox、Opera  
document.οnkeypress=doKey;  
//禁止后退键  作用于IE、Chrome  
document.οnkeydοwn=doKey;  
</script> 


解决onkeydown在IE和FF中的兼容问题  (这个我没做过测试呢)
IE浏览器中:


var keycode = event.keyCode;
FireFox和Opera浏览器中:


var keycode = e.which;
总结简便写法如下:


var currKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode;//支持IE、FF
完整demo如下:


<button type="button" οnclick="searchAuction();" id="btn_selector">   
<label>精确筛选</label>
</button>


<script type="text/javascript">
function keydown(e) {
var currKey=0,e=e||event; 
currKey=e.keyCode||e.which||e.charCode;//支持IE、FF 
if (currKey == 13) {
document.getElementByIdx_x("btn_selector").click(); 
}

document.onkeydown = keydown;//onkeydown事件调用方式 </script>
写法一、触发submit事件,支持IE


<form οnkeydοwn="checkkey(event)"> 
//上一段中介绍的event所携带的值传给了keys
function checkkey(keys)  

//判断一下是否同时按了CTRL键和ENTER键.
if(keys.ctrlKey && keys.keyCode == 13)
//如果判断的结果确实是两个键准确无误的按下了,那么就提交数据
{
this.document.form.submit();

}
说明:event是将这次按键的值传递给函数作判断用的。也就是说event里面承载着我们这次按键的数据。


写法二、触发click事件,支持IE


<body  οnkeydοwn="if (event.keyCode==13) {document.all.button2.click();}">


写法三、按键翻页效果,支持IE

<script type="text/javascript"> 
var preview_page = "14671.html"; 
var next_page = "14675.html"; 
var index_page = "index.html"; 
var article_id = "305"; 
var chapter_id = "14674"; 
function jumpPage() { 
    if (event.keyCode==37) 
        location=preview_page; 
    if (event.keyCode==39) 
        location=next_page; 
    if (event.keyCode==13) 
        location=index_page; 

document.οnkeydοwn=jumpPage; 
</script> 



应用的demo:

在test.jsp中引入test.js

document.okeydown = KeyLogin;

function KeyLogin(){

if(event.keyCode == 13){

LoginSystem();/////触发此function

}

}

展开阅读全文

没有更多推荐了,返回首页