`

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

阅读更多
系统默认情况下,使用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、运行效果
分享到:
评论

相关推荐

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

    在本文中,我们将深入探讨如何使用jQuery来实现回车键(Enter)切换焦点的功能,这是一种常见于表单处理中的交互设计。此功能已通过多种主流浏览器的测试,包括IE7、IE8、Firefox 3、Chrome 2和Safari 4,并在Visual...

    jQuery实现回车键(Enter)切换文本框焦点的代码实例

    在本例中,通过监听键盘事件(keydown)来实现回车键切换焦点的功能。当用户在文本框中按下键盘上的任意键时,会触发keydown事件。在事件处理函数中,通过事件对象e的which属性判断是否按下了回车键(键码为13)。...

    Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法

    在这个案例中,用户需要在输入框中使用回车键(Enter)来切换焦点,这在很多在线表单中非常常见。然而,在网络上找到的现成代码很多时候并不尽如人意。它们可能因为过于陈旧,不再兼容当前的浏览器,或者只在特定的...

    jquery 按键盘上的enter事件

    接下来我们使用Jquery实现回车键Enter切换焦点,此代码在常用浏览器IE7, IE8, Firefox 3, Chrome 2 和 Safari 4测试通过。使用的开发工具是微软VS2010+Jquery框架 实现步骤如下 1、首先引用Jquery类库 [removed]...

    javascript回车完美实现tab切换功能

    实现回车键切换功能的基本思路是捕获键盘事件,然后根据当前焦点所在的输入框,将焦点转移到下一个需要的输入框。以下是详细步骤和代码示例: 1. 引入jQuery库:在页面的部分添加jQuery的链接,确保在使用任何...

    基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )

    在这篇文章中,我们讨论了如何使用jQuery来实现一个特定的Web界面交互效果,即用户在表单中按下回车键(Enter)时,焦点能够像按下Tab键一样跳转到下一个输入框。这个功能在很多表单操作中非常常见,能够提升用户...

    Enter回车切换输入焦点实现思路与代码兼容各大浏览器

    在本主题中,我们将深入探讨如何实现一个Enter回车键切换输入焦点的功能,并确保兼容各大浏览器,包括IE、Firefox、Chrome等。这个功能在表单填写时特别有用,能够提高用户的操作效率。 一、实现思路 1. 监听键盘...

    JavaScript 回车 焦点切换

    本文主要探讨如何使用JavaScript代码实现回车键按下时,文本输入框之间焦点自动切换的功能。 ### JavaScript中实现焦点切换的核心思路 1. **监听键盘事件**:首先需要监听键盘按下事件。通常,我们会监听`keydown`...

    enter键控制input光标移动到下一个框

    在网页设计中,用户与页面交互的一个常见行为是使用键盘进行导航,特别是使用"Enter"键来提交表单或在多个输入框之间切换。本文将深入探讨如何利用HTML和jQuery实现"Enter"键控制input光标移动的功能,使得用户在按...

    jquery enter换行通用

    本文将详细介绍如何利用jQuery库来实现一个通用的“按下回车键换行”的功能,并确保该功能可以在各种主流浏览器上正常工作。 #### 二、关键概念解析 ##### 2.1 jQuery简介 jQuery 是一个快速、简洁的 JavaScript ...

    JS实现Enter键跳转及控件获得焦点

    本文主要讲述如何使用JavaScript实现当用户在网页中按下Enter键时,不仅能够触发某个动作(例如提交表单),还能让特定的控件获得焦点。通过使用jQuery,我们能够编写简短的代码来处理不同浏览器中的键盘事件差异,...

    表单切换,用回车键替换Tab健(不支持IE)

    在上述代码示例中,我们看到了一个用JavaScript实现的方案,用于将回车键事件转换为表单元素的焦点切换。这段代码的工作原理如下: 1. 首先,通过`document.getElementsByTagName("input")`获取所有输入元素(input...

    上下左右键控制table中光标(兼容多浏览器)

    本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格(table)中的光标移动,并在光标到达最后一个输入框时新增一行,确保这个功能在多个浏览器中都能正常工作。 首先,我们需要理解...

    vue面试题(二).docx

    12. **键盘事件按键监听**:使用`v-on:keyup`结合`:key`修饰符,如`v-on:keyup.enter="handleEnter"`监听回车键。 13. **数组更新**:Vue无法检测数组的直接索引修改或`push`、`pop`等方法,应使用`Vue.set`或数组...

    artDialog_Demo

    8、 给确定按钮增加Ctrl + Enter快捷键,锁屏的时候支持tab与方向键切换按钮焦点 9、 锁屏的时候屏蔽了键盘操作刷新、Tab切换(只在对话框中可用)与全选 10、修复Chrome特定情况下出现的iframe错位问题 11、修正...

Global site tag (gtag.js) - Google Analytics