1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Jquery实现回车键Enter切换焦点{转}

Jquery实现回车键Enter切换焦点{转}

时间:2024-07-18 18:02:50

相关推荐

Jquery实现回车键Enter切换焦点{转}

系统默认情况下,使用Tab按键切换页面元素的焦点,有没有想过回车键Enter也可以实现这种功能,并且具有良好的用户体验。接下来我们使用Jquery实现回车键Enter切换焦点,此代码在常用浏览器IE7, IE8, Firefox 3, Chrome 2 和 Safari 4测试通过。 使用的开发工具是微软VS+Jquery框架。 实现步骤如下1、首先引用Jquery类库<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>2、Javascript代码分析: $( '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代码分析:页面上存放四个文本框3、运行程序那页面中如果有TextArea 元素,我们如何使用Enter切换焦点呢,办法是有的,如下充分运用了Jquery的一些特性。4、HTML代码分析: 页面中所以的TextBox 引用Class=”cls”,便于后期的对页面元素的Jquery查询。5、Javascript代码分析: var $inp = $( '.cls'); 取的样式为cls的所有元素 赋值给变量inp6、运行效果

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。