开发者社区> 灵动生活> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Jquery实现回车键Enter切换焦点

简介: 系统默认情况下,使用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类库

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

 

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>

分析:

var $inp = $('.cls');

                   取的样式为cls的所有元素 赋值给变量inp

6、 运行效果

 

 

版权

作者:灵动生活 郝宪玮

出处:http://www.cnblogs.com/ywqu

如果你认为此文章有用,请点击底端的【推荐】让其他人也了解此文章,

img_2c313bac282354945ea179a807d7e70d.jpg

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery|focus焦点家族
focus的家族中有三个成员 成员 focus:当 字段获得焦点时发生 focus 事件 focusin:当 元素或其任意子元素获得焦点事件。 focusout:当 元素或其任意子元素失去焦点事件。
829 0
JQuery焦点Table
.prod_description_sizechart table{margin-bottom:0;width:992px;max-width:none;border-collapse:collapse;background-color:transparent;table-layout:fixed;border-spacing:0;} .
374 0
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
0 0
【jquery Ajax】接口的学习与Postcode插件的使用
【jquery Ajax】接口的学习与Postcode插件的使用
0 0
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
0 0
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
0 0
+关注
灵动生活
12年电商经验,8年IT项目管理经验,曾就职于中国第一家上市的B2C电商公司麦考林,擅长电商业务模式规划以及大型电商系统架构。创立闪酷&amp;酷客多小程序
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载