- 1、本文档共6页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
Jquery实现回车键Enter切换焦点
系统默认情况下,使用Tab按键切换页面元素的焦点,有没有想过回车键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代码
script type=text/javascript??????? $(function () {??????? $(input:text:first).focus();??????? var $inp = $(input:text);??????? $inp.bind(keydown, function (e) {??????????? var key = e.which;??????????? if (key == 13) {??????????????? e.preventDefault();??????????????? var nxtIdx = $inp.index(this) + 1;??????????????? $(:input:text:eq( + nxtIdx + )).focus();??????????? }??????? });??? });??? /script
分析:
$(input:text:first).focus();??
页面初始化时,焦点定位第一个文本框内
var $inp = $(input:text);???
取的type=文本框的元素集合
$inp.bind(keydown, function (e) {}?
给文本框集合绑定keydown事件
var key = e.which;????????
取的当前按下的键值 比如Enter的键值=13
e.preventDefault();????????
可以阻止它的默认行为的发生而发生其他的事情,在这里我们组织PostBack发生,而是切换焦点。另外一个相近的方法是stopPropagation,它起到阻止js事件冒泡的作用。
事件代理用到了两个在JavaSciprt事件中常被忽略的特性:事件冒泡以及目标元素。当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说,其目标元素都是原始元素,在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上,等待事件从它的子级元素里冒泡上来,并且可以很方便地判断出这个事件是从哪个元素开始的。
var nxtIdx = $inp.index(this) + 1;
取的元素集合inp中的下一个元素索引
$(:input:text:eq( + nxtIdx + )).focus();???
定位焦点到集合的下一个元素
3.、HTML代码
div??????? asp:TextBox ID=txt1 runat=server /br /??????? asp:TextBox ID=txt2 runat=server /br /??????? asp:TextBox ID=txt3 runat=server /br /??????? asp:TextBox ID=txt4 runat=server /br /??? /div
分析:页面上存放四个文本框
3、运行程序
那页面中如果有TextArea 元素,我们如何使用Enter切换焦点呢,办法是有的,如下充分运用了Jquery的一些特性。
4、HTML代码
div??????? asp:TextBox ID=tb1 runat=server class=cls /br /??????? asp:TextBox ID=tb2 runat=server class=cls /br /??????? asp:TextBox ID=tb3 TextMode=MultiLine runat=server class=cls /br /??????? asp:TextBox ID=tb4 runat=server class=cls /br /??? /div
分析:
页面中所以的TextBox 引用Class=”cls”,便于后期的对页面元素的Jquery查
您可能关注的文档
- IMS网络端到端QoS管理机制研究.doc
- INFORMATIC 开发规范.doc
- INF文件格式详解.doc
- Increasing Returns and Economic Geography翻译.doc
- Intel未来教育培训单元计划英语.doc
- Inspec 数据库培训 – for深圳大学城.ppt
- Interlanguage and the ‘natural’ route of developme.ppt
- INFORMIX命令集.doc
- internet应用基础教案-网络病毒的防范.ppt
- INTERNET题库.doc
- 某某单位2024年党建工作总结及2025年工作计划.doc
- 某某市发改委关于2024年度落实党风廉政建设工作责任制情况的报告.doc
- 某某局2024年全面从严治党和党风廉政建设工作总结.doc
- 某某区财政局2024年法治政府建设总结及2025年工作谋划.doc
- 2024年党管武装工作述职报告2篇.doc
- 2024年度国企党委书记抓基层党建工作述职报告3篇.doc
- 公司党委书记2024年述职述廉报告.docx
- 2024年度乡镇党委领导班子民主生活会(四个带头)对照检查材料.doc
- 市医疗保障局关于2024年法治政府建设工作情况的报告.docx
- 市民政局党组2024年巡察整改工作情况报告.docx
文档评论(0)