`
blessdyb
  • 浏览: 235729 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用jQuery来完成键盘事件的浏览器匹配

阅读更多

      最近写一个小的widget,需要来完成对于键盘事件的监听。以前的浏览器匹配都是手工去做,很是麻烦。这次使用一下鼎鼎有名的jQuery来试一下,但遇到了一些小的问题,不知道是不bug。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>jQuery</title>
		<script type="text/javascript" src="../lib/jquery/jquery-1.3.2.min.js"></script>
		<script>
			$(function(){
				$("#wrapper").bind("keyup",function(event){
					$("#result").html(String.fromCharCode(event.keyCode));
				});				
			});
		</script>
	</head>
	<body id="wrapper">
		<div id="result"></div>
	</body>
</html>

 代码如上,按道理说应该没有什么问题的,但是我在我的FF下试验时去没有任何响应(我的FF是3.5.4),在我的IE 6.0中也没有任何响应,在Opera 10中刷新一下后确有响应,很是让人郁闷。

改改代码,将上面的jQuery的$()中的#wrapper改为body,在FF和IE中仍然没有任何响应,这次在Opera中完全没问题。去掉$()中的所有东西。

$(function(){
	$().bind("keyup",function(event){
		$("#result").html(String.fromCharCode(event.keyCode));
	});				
});

 

这下好了,所有的浏览器都支持了。

1
0
分享到:
评论

相关推荐

    jquery虚拟键盘

    jQuery虚拟键盘插件通常兼容主流的现代浏览器,包括Chrome、Firefox、Safari、Edge和IE10+。但需要注意,不同的设备和屏幕尺寸可能会影响键盘的显示和交互,因此在开发时应进行充分的测试,确保在各种环境下都能正常...

    jquery屏幕键盘插件Virtual Keyboard

    `jQuery Virtual Keyboard`插件正是为此目的设计的,它提供了一个在浏览器内的虚拟屏幕键盘,用户可以通过触摸或鼠标点击在屏幕上输入文字。这个插件基于流行的JavaScript库jQuery,使得集成到现有的Web项目中变得...

    jquery 车牌号输入键盘

    利用jQuery的灵活性和layer插件的弹出层功能,该键盘能提供一种高效且直观的方式来输入车牌号。 首先,jQuery是JavaScript的一个轻量级库,它简化了DOM操作、事件处理和Ajax交互。在这个车牌号输入键盘中,jQuery...

    移动端友好的jQuery数字键盘插件.zip

    4. **事件监听**:`jQuery.NumPad`提供了丰富的事件回调机制,如`onKeyEnter`、`onKeyCancel`等,方便开发者捕获用户的输入行为并作出响应,如验证输入值或执行特定操作。 5. **易用性**:通过简单的jQuery选择器和...

    jQuery-1.9.1源码分析系列(十)事件系统之事件包装

    通过以上分析,我们可以看到jQuery如何通过事件包装来增强浏览器原生事件,提供更灵活的事件处理机制,包括上下文控制、自定义属性以及对事件默认行为的管理。这种机制使得开发者能够更方便地在JavaScript中编写复杂...

    jquery兼容所有浏览器双日历控件

    6. **键盘导航**:对于无障碍访问,日历控件应支持键盘操作,如使用箭头键进行日期切换。 7. **日期格式化**:控件应能根据需求将选择的日期格式化为各种常见格式,如"YYYY-MM-DD"或"MM/DD/YYYY"。 8. **日期限制*...

    jquery快捷动态绑定键盘事件的操作函数代码

    在JavaScript库jQuery中,动态绑定键盘事件是一种常见的功能,用于响应用户在浏览器中的键盘输入。本篇文章将详细解析如何使用jQuery快速、便捷地实现动态绑定键盘事件的操作。 首先,我们来看一下提供的代码片段。...

    jQuery输入框提示绑定车牌所属省份代码

    这部分代码会结合jQuery和其他库(如Layer)来完成上述提到的功能。 通过整合这些资源,我们可以构建一个交互性强且用户体验良好的车牌号输入提示系统。开发过程中,还需要注意兼容性问题,确保在不同的浏览器环境...

    jQuery实现按下键盘对应字母亮灯的字母墙动画效果源码.zip

    2. **事件监听**:jQuery的`.on()`方法用于绑定事件监听器,例如监听键盘按键事件。当用户按下键盘上的一个键时,会触发对应的事件,如`keyup`或`keydown`。 3. **动画效果**:jQuery的`.animate()`函数是实现动画...

    Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法

    最终,作者提供了一段JQuery代码,这段代码通过`$(document).ready()`来确保在文档加载完成后绑定键盘事件。为了兼容性,也对IE和Firefox使用了不同的键码判断逻辑。在代码中,首先使用`$('input:text:first').focus...

    下拉模糊查询 jQuery-select

    1. **实时监听**:jQuery-select 监听下拉框上的键盘事件,当用户输入字符时,它会触发搜索函数。 2. **匹配算法**:默认情况下,插件可能使用全词匹配或部分匹配策略。部分匹配是指只要输入的字符序列出现在选项的...

    使用jQuery和PHP构建一个受Ajax驱动的Web页面

    接着,引入jQuery库,并编写jQuery代码来监听输入框的键盘事件。当用户输入时,使用$.ajax()方法发起异步请求,这个方法包含URL(指向PHP处理脚本的路径)、类型(GET或POST)、数据(用户输入的查询字符串)和其他...

    jquery 改写Alert弹出框样式

    5. **处理用户交互**:在自定义的弹出框中,你可以添加更多的交互功能,比如取消按钮、确认按钮的回调函数,甚至可以加入键盘事件监听,让用户可以通过按键来关闭对话框。 6. ** Accessibility**:确保你的自定义弹...

    jquery写的拼音输入法

    jQuery的事件监听器可以捕捉到用户的每一次按键,然后调用拼音库进行匹配,并将匹配结果展示在输入框下方的候选区。 3. **自动识别**:为了提高用户体验,输入法还需要具备智能识别功能。例如,如果用户输入的是...

    jquery-3.5.1.js.7z

    其次,jQuery的事件处理机制让开发者可以方便地绑定和解绑事件。使用`.on()`方法,我们可以监听各种DOM事件,如点击事件`click`,键盘事件`keydown`等。同时,`.off()`方法则可以解除这些绑定,避免内存泄漏。 在...

    RIA应用开发:5-jQuery事件处理.ppt

    5. **常用事件**:jQuery支持多种内置事件,如浏览器事件(如`load`、`unload`)、表单事件(如`submit`、`change`)、键盘事件(如`keydown`、`keyup`)和鼠标事件(如`click`、`mouseover`)。这些事件使得开发者...

    jQuery自动补全筛选input代码.zip

    2. **事件处理(Event Handling)**:jQuery提供了绑定事件的方法,如`$(element).on("keyup", function() {...})`,这里的keyup事件会在用户释放键盘键时触发。在自动补全功能中,我们需要监听input元素的keyup事件...

    jquery_api.rar_jquery

    jQuery 是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本指南将深入探讨jQuery的核心特性,帮助开发者快速掌握并有效利用jQuery进行网页开发。 ### 一、jQuery...

    jQuery实现的Email中的收件人效果(按del键删除)

    综上所述,通过本例中所展示的代码,我们可以了解到使用jQuery实现的Email中的收件人效果,如何通过键盘事件处理器来控制收件人的添加与删除,以及如何运用JavaScript和HTML进行基本的前端开发。这些知识点不仅有助...

Global site tag (gtag.js) - Google Analytics