当前位置:  编程技术>jquery

jquery回车键enter切换焦点如何实现

    来源: 互联网  发布时间:2014-10-04

    本文导语:  系统默认情况下,使用tab按键切换页面元素的焦点,有没有想过回车键enter也可以实现这种功能,并且具有良好的用户体验。 使用jquery实现回车键enter切换焦点,此代码在常用浏览器ie7, ie8, firefox 3, chrome 2 和 safari 4测试通过。 ...

系统默认情况下,使用tab按键切换页面元素的焦点,有没有想过回车键enter也可以实现这种功能,并且具有良好的用户体验。

使用jquery实现回车键enter切换焦点,此代码在常用浏览器ie7, ie8, firefox 3, chrome 2 和 safari 4测试通过。
使用的开发工具是微软vs2010+jquery框架。

实现步骤:
1、 首先,引用jquery类库
 

代码示例:

2、 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();
}
});
});

分析:
$('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代码
 

代码示例:

$(function () {
$('input:text:first').focus();
var $inp = $('.cls');
$inp.bind('keydown', function (e) {
var key = e.which;
if (key == 13) {
e.preventdefault();
var nxtidx = $inp.index(this) + 1;
$(".cls:eq(" + nxtidx + ")").focus();
}
});
});

分析:
var $inp = $('.cls');
取的样式为cls的所有元素 赋值给变量inp

6、 运行效果,如下图:


    
 
 

您可能感兴趣的文章:

  • jQuery回车键切换文本框焦点
  • jquery 回车键事件小例子
  • jQuery回车键事件实例代码
  • jQuery回车键绑定点击事件示例
  • jquery 绑定回车动作扑捉回车键触发的事件
  • jQuery实现当按下回车键时绑定点击事件
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery 扑捉回车键事件代码
  • jquery如何扑捉回车键触发的事件
  • Jquery响应回车键直接提交表单操作代码
  • Jquery 监视按键、回车键触发事件的实例
  • Jquery 监视按键,按下回车键触发某方法的实现代码
  • jquery 回车键Enter切换焦点的实现代码
  • jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
  • jquery 绑定、捕获、拦截回车事件的例子
  • jquery 回车登录的实现方法
  • jquery回车事件的示例代码
  • jquery捕捉回车事件的代码
  • jquery 文本框回车事件 跳到下一个文本框
  • jquery代码:多浏览器捕捉回车事件
  • jquery 回车事件的实例分享
  • jquery 回车事件的实现代码
  • jQuery 回车事件enter使用示例
  • jquery button默认enter事件(回车事件)
  • jquery文本框回车与change事件示例
  • Jquery回车为tab焦点切换(回车相当于按tab键)的代码
  • jquery 捕获回车事件的实现代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery图片切换插件 ImageSwitch
  • jQuery 开关切换插件 On-Off Toggle Switches
  • jQuery图片效果切换 Adipoli
  • jQuery的对象切换插件 sochange-juqeryplugin
  • jQuery 页面切换插件 browserSwipe.js
  • jquery 新闻循环切换的实现代码
  • jQuery 随机切换图片的例子
  • jquery图片淡入淡出与图片切换效果的例子
  • jQuery字体大小切换的实现代码
  • jquery自动切换淡入淡出效果的例子
  • Jquery 点击切换图片并隐藏与显示内容的实现代码
  • Jquery实例 动态切换图片
  • jquery限制只能输入数字 禁止复制粘贴与输入法切换
  • jQuery导航条背景切换效果的实现代码(图文)
  • jQuery图片切换插件jquery.cycle.js使用示例
  • jquery自动切换tabs选项卡的实现代码
  • jQuery切换网页皮肤并保存到Cookie示例代码
  • jquery自动切换tabs选项卡的具体实现
  • Jquery图片滚动切换的代码
  • jQuery实现的一个tab切换效果内部还嵌有切换
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3