基于Jquery实现回车键切换焦点

接下来，我们使用Jquery用回车键切换焦点。这段代码已经通过了常见浏览器IE7、IE8、火狐3、Chrome 2和Safari 4的测试。使用的开发工具是微软VS2010 Jquery框架。实施步骤如下：1。首先引用Jquery类库脚本src=' http : script/Jquery-1 . 4 . 1 . min . js ' type=' text/JavaScript '/script 2，JavaScript代码副本的Code如下： script type=' text/JavaScript ' $(function(){ $(' input 3360 text 3360 first ')。焦点()；var $ InP=$(' input 3360 text ')；$inp.bind('keydown '，函数(e){ var key=e . what；if(key==13){ e . preventdefault()；var NxTiDx=$ InP . index(this)1；$(' : input : text : eq(' NxTiDx ')')。焦点()；} });});/script analysis:$(' input : text 3360 first ')。焦点()；初始化页面时，焦点位于第一个文本框中的var $ InP=$(' input 3360 text ')；取文本框$ inp.bind ('keydown ')的type=元素集，函数(e) {}并绑定' keydown '事件var key=e . what；取当前按下的键值，如Enter=13e . preventdefault()；它可以防止其默认行为的发生和其他事情的发生。这里我们组织回发的发生，但是改变焦点。另一个类似的方法是stopPropagation，它可以防止js事件冒泡。事件代理使用了在JavaSciprt事件中经常被忽略的两个特性：事件冒泡和目标元素。当元素上的事件被触发时，例如，当鼠标单击一个按钮时，在该元素的所有祖先元素中将触发相同的事件。这个过程叫做事件冒泡。该事件从原始元素冒泡到DOM树的顶部。对于任何事件，其目标元素都是原始元素，在我们的示例中是按钮。目标元素作为属性出现在我们的事件对象中。使用事件代理，我们可以向元素添加事件处理程序，等待事件从其子元素中冒泡，并轻松确定事件从哪个元素开始。var NxTiDx=$ InP . index(this)1；取下一个元素索引$(' : input 3360 text : eq(' NXT IDX ')')。inp中的focus()；将焦点定位到集合的下一个元素。3.HTML代码复制如下： div ASP : TextBox ID=' txt 1 ' Runat=' server '/br/ASP : TextBox ID=' txt 2 ' Runat=' server '/br/ASP : TextBox ID=' txt 3 ' Runat=' server '/br/ASP : TextBox ID=' txt 4 ' 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/asp3360 TextBox ID=' tb3 ' text mode=' multiline ' runat=' server ' class=' cls '/br/asp3360 TextBox ID=' tb4 ' runat=' server ' class5.复制Javascript代码如下： Script Type=' text/JavaScript ' $(function(){ $('先输入3360 text 3360 ')。焦点()；var $inp=$('。cls’)；$inp.bind('keydown '，函数(e){ var key=e . what；if(key==13){ e . preventdefault()；var NxTiDx=$ InP . index(this)1；$(. cls : eq(' NxTiDx '))。焦点()；} });});/script analysis: var $inp=$('。cls’)；cls样式的所有元素都被分配给变量inp 6，running effect 。

作者：智慧生活。