初识document.onkeydown及其兼容性问题
来源:互联网 发布:淘宝怎么交30元保证金 编辑:程序博客网 时间:2024/06/01 10:13
看导师的代码,写得还真不错。。。
就是复杂啊,全是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.onkeypress=doKey;
//禁止后退键 作用于IE、Chrome
document.onkeydown=doKey;
</script>
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" onclick="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 onkeydown="checkkey(event)">
//上一段中介绍的event所携带的值传给了keys
function checkkey(keys)
{
//判断一下是否同时按了CTRL键和ENTER键.
if(keys.ctrlKey && keys.keyCode == 13)
//如果判断的结果确实是两个键准确无误的按下了,那么就提交数据
{
this.document.form.submit();
}
}
说明:event是将这次按键的值传递给函数作判断用的。也就是说event里面承载着我们这次按键的数据。
写法二、触发click事件,支持IE
<body onkeydown="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.onkeydown=jumpPage;
</script>
应用的demo:
在test.jsp中引入test.js
document.okeydown = KeyLogin;
function KeyLogin(){
if(event.keyCode == 13){
LoginSystem();/////触发此function
}
}
- 初识document.onkeydown及其兼容性问题
- 初识document.onkeydown及其兼容性问题
- 初识document.onkeydown及其兼容性问题
- document.getElementsByClassName在ie8及其以下浏览器的兼容性问题
- document.getElementsByClassName在ie8及其以下浏览器的兼容性问题
- document.getElementsByClassName兼容性问题
- MyEclipse10在function定义document.onkeydown出错
- onKeyDown()
- onKeyDown
- onKeyDown
- onkeydown
- 关于document.onkeydown用法(按下回车提交)
- js scrollTop兼容性问题--document.body.scrollTop与document.documentElement.scrollTop
- document.all及其用法
- 初识-常见浏览器兼容性问题与解决方案
- Angularjs初识及其特性
- 【兼容性解决】页面滚动距离document.documentElement.scrollTop兼容性问题
- 初识C#及其开发环境
- 【数据结构】算法9.17-9.18 哈希表-插入&查找
- 如何实现版本控制(判断是否为新版本,显示新特性)
- DRAM的结构之概括(一)
- hdu2087剪花布条[KMP]
- 11.2.2、搭建RESTful API之使用PasteDeploy定制WSGI服务
- 初识document.onkeydown及其兼容性问题
- win C盘清理工具,筛选后亲测安全
- struts2提供的数据校验
- hdu1203
- 浅析 mtd 子系统
- hibernate缓存学习之【一级缓存】
- 单例模式详解
- 【数据结构】算法10.1 插入排序-直接插入
- Scala lazy