`

Jquery键盘事件实例1

 
阅读更多

    //document的键盘事件
            //键盘事件参数
            //e.charCode:最后响应键盘按键的键值
            //e.keyCode: 最后响应键盘按键的键值
            //e.ctrlKey,e.shiftKey,e.altKey:判断组合键时,是否按下

            //输出键盘的ASCII值
            //键值:(a:65   z:90),(0:48   9:57),(tab:9  enter:13,  ctrl:17  shift:16  alt:18  空格:32  )

            $(document).keydown(function(e){
                alert(e.keyCode);
            });


            //键值(a:97  z:122),(0:48  9:57)

            $(document).keypress(function(e){
                alert(e.keyCode);
            });



            //方向键判断,(上:38  下40: 左:37   右:39)

            $(document).keydown(function(e){
                if(e.keyCode ==37){
                    alert("当前是左");
                }
                elseif(e.keyCode ==38){
                    alert("当前是上");
                }
                elseif(e.keyCode ==39){
                    alert("当前是右");
                }
                elseif(e.keyCode ==40){
                    alert("当前是下");
                }
            })

            //组合键判断

            $(document).keydown(function(e){
                //ctrl+enter
                if(e.ctrlKey && e.keyCode ==13){
                    alert("ctrl+enter组合键触发");
                }

                //ctrl+alt
                if(e.ctrlKey && e.altKey){
                    alert("ctrl+alt组合键触发");
                }

                //ctrl+alt+enter
                if(e.ctrlKey && e.altKey && e.keyCode ==13){
                    alert("ctrl+alt+enter组合键触发");
                }

                //ctrl+shift+delete
                if(e.ctrlKey && e.shiftKey && e.keyCode ==46){
                    alert("ctrl+shif+delete组合键触发");
                }
            });


            //获取键盘字符
            //e.charCode:在keydown事件中总为0,在keypress事件中为e.keyCode
            //e.char:在keydown事件和keypress事件中返回相同都是返回字符

$(document).keydown(function(e){
alert(e.charCode);
});
$(document).keypress(function(e){
alert(e.charCode);
});

$(document).keydown(function(e){
alert(e.char);
});

$(document).keypress(function(e){
alert(e.charCode);
});

            //键盘事件的触发顺序
            //使用弹出对话框的方式检测,不靠谱
            //在三个事件都注册的情况先:先触发keydown,在触发keypress,没有触发keyup
            //只有在keydown和keypress没有注册的时候才会触发keyup

$(document).keydown(function(e){
alert("keydown");
});
$(document).keypress(function(e){
alert("keypress");
});
$(document).keyup(function(){
alert("keyup");
});

var str ="";
$("#txtOne").keydown(function(e){
str +="keydown----->";
});
$("#txtOne").keypress(function(e){
str +="keypress----->";
});
$("#txtOne").keyup(function(){
str +="keyup----->";
alert(str);
});

            //键盘事件的完成
            //判断输入的是否是数字,否则自动完成事件不显示内容(适用于非中文输入法)

$("#txtOne").keypress(function(e){
if(e.keyCode >=48&& e.keyCode <=57){

}
else{
alert("输入的不是数字");
e.preventDefault();
}
});

       //判断输入的是否是数字,否则自动完成事件不显示内容(适用于中文输入法和其他)

$("#txtOne").keydown(function(e){
if(e.keyCode >=48&& e.keyCode <=57){

}
else{
alert("输入的不是数字");
e.preventDefault();
}
});

分享到:
评论

相关推荐

    jQuery网页开发实例精解源代码

    书中实例可能会涉及点击、鼠标移动、键盘输入等事件的监听与响应,帮助读者理解如何优雅地绑定和触发事件。此外,jQuery还提供了许多简化的事件处理方法,如`.on()`和`.off()`,这些在源代码中会有清晰的展示。 ...

    jQuery搜索框实例绑定提交事件.zip

    jQuery搜索框实例绑定提交事件是一款下拉选择多种搜索引擎分类,搜索框输入文字键盘回车绑定提交搜索按钮代码。    dropdown-toggle search-select" data-toggle="dropdown"&gt;百度搜索  ...

    jquery 时间控件实例

    综上所述,jQuery时间控件实例涉及到了jQuery库的使用、插件的集成、事件处理和前端交互设计等多个方面。选择合适的插件或自定义实现,能够为用户提供高效且直观的时间选择体验,提升网站或应用的用户体验。

    JQuery 漂亮的软键盘

    1. **事件绑定**:插件提供了丰富的事件接口,如`open`、`close`、`accept`等,可以监听并处理键盘的各种状态变化。 2. **自定义布局**:除了预设的布局外,还可以自定义键盘的键位分布,满足特定需求。 3. **国际化...

    jquery.hotkeys键盘事件处理插件DEMo

    《jQuery.hotkeys键盘事件处理插件DEMO深度解析》 jQuery.hotkeys是一个强大的插件,专为处理键盘事件而设计,使得开发者可以轻松地监听并响应用户按下特定按键的组合。这个插件由John Resig创建,是jQuery库的一个...

    jQuery键盘按键按钮响应事件代码.zip

    这个"jQuery键盘按键按钮响应事件代码.zip"压缩包文件包含了一个实例,展示了如何利用jQuery来监听和响应用户的键盘输入。下面将详细解释相关知识点。 首先,`index.html`是网页的主文件,它通常包含了HTML结构,...

    酷炫键盘Jquery源码

    1. **Jquery库**:Jquery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画效果以及Ajax交互。在本项目中,Jquery用于控制键盘元素的显示、隐藏、事件绑定以及动态效果。 2. **HTML结构**:`index....

    JQUERY基础教程实例(表格编辑)

    总之,“JQUERY基础教程实例(表格编辑)”涵盖了jQuery的核心概念,包括选择器、事件处理、DOM操作、Ajax通信以及用户交互的优化。通过学习这个实例,开发者可以掌握创建动态、交互性强的表格编辑功能,提升网站的...

    jQuery表单验证实例代码

    3. **事件监听**:jQuery提供了丰富的事件处理方法,例如`submit`用于监听表单提交事件,`focus`和`blur`用于处理焦点变化,以及`keyup`监听键盘按键释放。在表单验证中,我们通常在`submit`事件中执行验证逻辑,...

    Jquery,js,软键盘,小键盘

    总结,这个资源集合提供了利用jQuery和JavaScript构建软键盘的实例,对于学习者来说,这是一次深入了解前端交互设计和实现的实践机会。通过这个项目,你可以掌握如何使用JavaScript处理用户输入,如何用jQuery实现...

    精通javascript+jQuery书中实例

    5. **事件处理**:JavaScript 通过监听和响应用户或浏览器的事件来实现交互性,如点击、滚动和键盘输入等。 6. **AJAX**:Asynchronous JavaScript and XML,用于在后台与服务器交换数据,更新部分网页,无需刷新...

    jquery.hotkeys插件键盘按键监听事件代码.zip

    《jQuery Hotkeys插件:深入理解键盘按键监听事件》 jQuery Hotkeys插件是一款功能强大的JavaScript库,它扩展了jQuery的核心功能,使得开发者能够轻松地为网页中的元素添加对键盘按键事件的监听。这个插件在Web...

    jquery虚拟键盘中文打字效果.zip

    1. **jQuery库**:jQuery是这个虚拟键盘的基础,它通过简洁的API让JavaScript编程变得更加容易。例如,`$(selector).function()`这样的语法使得操作DOM元素变得简单,而`$.ajax()`则简化了异步数据请求。 2. **虚拟...

    jQuery键盘打出逐字逐句显示特效.zip

    通过学习和实践这个"jQuery键盘打出逐字逐句显示特效",开发者不仅可以增强对jQuery和JavaScript事件处理的理解,还能提升在交互设计方面的技能。这是一个很好的实例,可以帮助开发者将理论知识转化为实际应用,提高...

    jQuery密码键盘后台登录界面模板

    本项目"jQuery密码键盘后台登录界面模板"是针对登录界面设计的一个实例,利用jQuery的功能来实现一个友好的用户体验。下面我们将深入探讨这个模板中的关键知识点。 1. **jQuery库**:jQuery的核心是其简洁的API,它...

    jquery的一些实例(包含了前端开发人员必知的实例)

    在前端开发领域,jQuery是一个非常重要的JavaScript库,它极大地简化了DOM操作、事件处理、动画设计和Ajax交互。本资源“jquery的一些实例(包含了前端开发人员必知的实例)”提供了丰富的jQuery实践案例,旨在帮助...

    jquery_键盘快捷键

    其中,"jquery_键盘快捷键"是一个重要的主题,它涉及到如何利用jQuery来定义和处理键盘快捷键事件,以便增强用户的交互体验。下面将详细阐述这一领域的相关知识点。 一、jQuery简介 jQuery是一个轻量级的JavaScript...

    jquery键盘事件使用介绍

    ### jQuery键盘事件使用详解 #### 一、键盘事件概述 在网页开发中,键盘事件是非常重要的交互手段之一,尤其在需要用户输入或者通过键盘控制页面元素的应用场景中尤为重要。jQuery 提供了简单易用的方式来处理键盘...

    jQuery手机移动端点击弹出数字键盘输入代码.zip

    jQuery作为一款广泛使用的JavaScript库,提供了丰富的功能来优化网页交互,其中包括在手机移动端实现点击弹出数字键盘输入的功能。本篇文章将深入探讨这一话题,帮助开发者理解并掌握相关技术。 首先,我们需要了解...

Global site tag (gtag.js) - Google Analytics