• 技术文章 >web前端 >js教程

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

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

    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的所有元素 赋值给变量inp
    6、 运行效果

    作者:灵动生活
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:Asp.net下使用Jquery Ajax传送和接收DataTable的代码_jquery 下一篇:Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)_jquery
    Web大前端开发直播班

    相关文章推荐

    • Node更新了,一起看看Node18的新特性!• Angular如何对请求进行拦截封装?• 怎么获取Node性能监控指标?获取方法分享• ie8是否支持es6• react如何实现hooks?必须依赖 Fiber 么?

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网