系统默认情况下,使用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>

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查询。

5、 Javascript代码

<script type="text/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(); 

}); 
}); 
</script>

基于Jquery的实现回车键Enter切换焦点的更多相关文章

  1. 基于jQuery的网站首页宽屏焦点图幻灯片

    今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  2. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  3. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. 基于jQuery左侧大图右侧小图切换代码

    基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  5. 一款基于jquery超炫的图片切换特效

    今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的 ...

  6. 基于jQuery的自适应图片左右切换

    效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm 基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个 ...

  7. 基于jQuery环形图标菜单旋转切换特效

    分享一款基于jQuery环形图标旋转切换特效.这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码.效果图如下: 在线预览   源码下载 实现的代码. js代码: /* 图片地址可以是相对路径或绝 ...

  8. 分享一个自己写的基于JQuery的一个Web背景切换的Demo

    这个效果主要有两个特点: 1. 背景切换的渐变 2. 背景大小自适应 3. 背景自适应保持比例同时, 相对居中 js源码: (function ($) { $.fn.bgChange = functi ...

  9. 4款基于jquery的列表图标动画切换特效

    网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览   源码下载 实现的代码 ...

随机推荐

  1. webDriver API——第12部分WebElement

    class selenium.webdriver.remote.webelement.WebElement(parent, id_) Bases: object Represents a DOM el ...

  2. MiniHttpServer

    Mini HTTP Server which can be embed in EXE, Writen in C#(.net framework 2.0). HTTP request dispatch/ ...

  3. android的五大布局(layout)

    Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建 筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是LinearLa ...

  4. Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案

    Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成  ...

  5. java强行删除文件(针对进程正在使用的文件的删除)

    boolean result = f.delete(); if(!result)    { System.gc(); f.delete; }

  6. __attribute__机制介绍(转)

    转自 http://blog.csdn.net/ithomer/article/details/6566739 1. __attribute__ GNU C的一大特色(却不被初学者所知)就是__att ...

  7. WEEX快速入门

    WEEX快速入门 WEEX 是阿里推送的一款基于Node.js,轻量级的移动端跨平台动态性技术解决方案,用于构建原生的速度的跨平台APP. 1. 搭建WEEX环境 1.1 首先下载安装Node.js, ...

  8. ruby之各种概念

    一.引言 刚开始接触ruby,遇到问题于是上网查资料,但是有时候却又看不懂,这很大一部分原因是我不知道一些关于ruby的概念名词是什么意思,所以看了别人的回答也理解不了. 二.各种名词 ruby:这个 ...

  9. ORACLE建立物化视图

    --使用 on commit 的方式建立物化视图 create materialized view emp_dept refresh on commit as select t.*,d.dname f ...

  10. 在Windows7和Ubuntu上编译安装MICO

    MICO是CORBA标准的一个实现.开源并且被广泛使用. 首先的首先,看用户手册,在页面"http://www.mico.org/docu.html"找到一本教材"MIC ...