基于Jquery实现键盘按键监听

从NETTUTS看到的文章，效果很不错，有点类似于Flash做出来的效果，demo在这里 ，原文 对实现步骤讲得很清楚，我就不多提了，实现效果的逻辑比较简单，也就是slideDown()方法，

jquery slideDown()方法，实现滑动效果。

代码如下:

// shows a given element and hides all others 
function showViaKeypress(element_id) 
{ 
    $(".container").css("display","none"); 
    $(element_id).slideDown("slow"); 
}

// shows proper DIV depending on link 'href' 
function showViaLink(array) 
{ 
    array.each(function(i) 
    {    
        $(this).click(function() 
        { 
            var target = $(this).attr("href"); 
            $(".container").css("display","none"); 
            $(target).slideDown("slow"); 
        }); 
    }); 
}

而对键盘按键的监听是用的keypress()方法，其实也没什么难度，不过我们很少在页面上使用按键监听，这个例子比较新奇，值得我们参考，如有必要时，可以在项目里用用。

代码如下:

$(document).keypress(function(e) 
    { 
        switch(e.which) 
        { 
            // user presses the "a" 
            case 97:    showViaKeypress("#home"); 
                        break;

// user presses the "s" key 
            case 115:   showViaKeypress("#about"); 
                        break;

// user presses the "d" key 
            case 100:   showViaKeypress("#contact"); 
                        break;

// user presses the "f" key 
            case 102:   showViaKeypress("#awards"); 
                        break;

// user presses the "g" key  
            case 103:   showViaKeypress("#links"); 
        } 
    });

赞 (0)

相关推荐

  • 基于jquery的监控数据是否发生改变

    这样之前的功夫又白费了.解决这些问题的办法就是:监控页面数据是否发生变化.如果发生变化,提示用户保存.如果数据未发生变化.当我们点击保存时,也不需要提交到数据库. 接下来看看解决办法: 复制代码 代码如下: ///<reference path="jquery-1.3.2-vsdoc2.js" /> (function($) { var pageDataChange = false //默认标识页面数据未发生改变 /*监控页面数据是否发生变化*/ $.fn.MonitorD

  • jQuery 监控键盘一段时间没输入

    监控一段时间没输入可用于简单的输入完成 上次实现了一个模拟输入完成则发送请求到后台获取数据的并显示到前台的问题,其中核心的判断标准是输入完成的定义. 即:用户怎么算输入完成. 我使用的标准是,当一个文本框中,里面的内容1秒钟无变化,则表示用户1秒钟内无输入,说明用户是已经输入完成,再等待返回数据了.那么jQuery如何实现判断1秒内无输入呢. <!DOCTYPE html> <html> <head> <script src="http://apps.b

  • jQuery监控文本框事件并作相应处理的方法

    本文实例讲述了jQuery监控文本框事件并作相应处理的方法.分享给大家供大家参考.具体如下: //事情委托 $(document) .on('input propertychange', '#query', function(){ var input = $(this).val(); show(input); }); var show = function(txt){ var info = '监听:<b>' + txt + '</b><br /><br />

  • jquery.autocomplete修改实现键盘上下键自动填充示例

    根据需求要实现通过键盘上下移动,获得联想菜单中的值,如同google baidu的查询功能. 在网上找了很久没有找到可以实现该功能的插件,无奈只能自己动手改代码. 找到js中的KEY.DOWN 和 KEY.UP执行代码 如下: 复制代码 代码如下: case KEY.DOWN: event.preventDefault(); if ( select.visible() ) { select.next(); } else { onChange(0, true); } break; 在select.

  • jquery监控数据是否变化(修正版)

    复制代码 代码如下: ///<reference path="query-1.5.1.min.js" /> (function($) { /*监控页面数据是否发生变化*/ var pageDataChange = false; var tagName = "Input, Select, Textarea"; var ctrlIds = []; $.fn.MonitorDataChange = function(options) { var deafult

  • jQuery实现监控页面所有ajax请求的方法

    本文实例讲述了jQuery实现监控页面所有ajax请求的方法.分享给大家供大家参考,具体如下: 你是不是有遇到这样的问题:页面发起两个ajax请求,希望它们都成功以后,再做一个动作? 很容易想到的解决方案是,等其中一个结束以后,再发起另外一个,这个过程用回调函数来完成. 但是,如果其中一个ajax请求的代码不是你写,你改不了,怎么办? 又或者说,你只想知道某个url请求什么时候结束,不想管其他的请求,怎么弄? <!DOCTYPE html> <html lang="en&quo

  • jquery 按键盘上的enter事件

    接下来我们使用Jquery实现回车键Enter切换焦点,此代码在常用浏览器IE7, IE8, Firefox 3, Chrome 2 和 Safari 4测试通过.使用的开发工具是微软VS2010+Jquery框架 实现步骤如下 1.首先引用Jquery类库 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 2.Javascript代码 复制代

  • jQuery scroll事件实现监控滚动条分页示例

    scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. 复制代码 代码如下: $(document).ready(function () { //本人习惯这样写了    $(window).scroll(function () {        //$(window).scrollTop()这个方法是当前滚动条滚动的距离        //$(window).height()获取当前窗体的高度        //$(docume

  • 打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)

    打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)

    最近做项目,我负责做网页前端,客户需要利用触摸屏进行操作,不外接鼠标键盘,但要求能录入文字,包括数字,英文,中文.思考了一下,决定用JS实现虚拟键盘. 首先上网搜索了一下JS虚拟键盘,在经过仔细筛选后,相中了VirtualKeyboard,一款功能强大的JS虚拟键盘插件. 先简单介绍一下VirtualKeyboard,它内置了100多种键盘布局和200多种输入法,9套可选皮肤方案,而且支持自建输入法,功能相当强大. 先附上下载地址,目前的最新版本3.94:http://www.coralloso

  • jquery.hotkeys监听键盘按下事件keydown插件

    jquery.hotkeys监听键盘按下事件keydown插件

    jquery.hotkeys文件下载:  http://xiazai.jb51.net/201405/yuanma/jquery_hotkeys(jb51.net).rar 参照了一下它的文档用法,我们可以这样使用: 复制代码 代码如下: <script src="jquery-1.4.1.min.js" type="text/javascript"></script>    <script src="jquery.hotke

随机推荐