文档章节

按回车键自动跳到下一个文本框

c
 caiyezi
发布于 2016/11/08 20:24
字数 296
阅读 2
收藏 0

文本框如下:

<table id="table">
    <tr>
        <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td>
     <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td>
     <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td>
    </tr>
   <tr>
        <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td>
     <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td>
     <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td>
     </tr>
   <tr>
        <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td>
     <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td>
     <td><input type="text" style="width: 150px" id="text6" onkeydown="return changeTab(event,this)"></td>
     </tr>
</table>

添加回车事件&方向事件(上下左右):

function changeTab(event,i){
    var keyCode = event.keyCode;
    var inputs = jQuery("#table :input"); // 获取表单中的所有输入框
    var idx = inputs.index(i);
    switch(keyCode){
        case 13:
            inputs[idx + 3].focus(); // 设置焦点
            inputs[idx + 3].select(); // 选中
            break;
        case 37:        //
            inputs[idx - 1].focus(); // 设置焦点
            inputs[idx - 1].select(); // 选中
            break;
        case 38:        //
            inputs[idx - 3].focus(); // 设置焦点
            inputs[idx - 3].select(); // 选中
            break;
        case 39:        //
            inputs[idx + 1].focus(); // 设置焦点
            inputs[idx + 1].select(); // 选中
            break;
        case 40:        //
            inputs[idx + 3].focus(); // 设置焦点
            inputs[idx + 3].select(); // 选中
            break;
        default:
            break;
    }
    return true;
}

 

本文转载自:http://www.cnblogs.com/vipzhou/p/5000234.html

共有 人打赏支持
c
粉丝 1
博文 108
码字总数 0
作品 0
西安
程序员
私信 提问
js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器) ...

在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1.阻止浏览器的默认行为 [java] function stopDefault(e) { //如果提供了事件对象,...

java_T
2012/07/13
0
0
vim 学习记录 - 第三级

上次命令回顾: 在光标后面插入内容 小写的o在当前行的后一行插入内容 大写的O在当前行的上一行插入内容 替换从当前位置到单词结束的字符 数字的零,移动光标到当前行的行头。 到当前行除过空...

Mr_欢先生
2017/12/03
0
0
EasyUI for jQuery 1.5.4.1 发布,bug 修复和改进

EasyUI for jQuery 1.5.4.1 已发布,更新如下: 更新日志 错误 combotreegrid:在输入框中键入值不触发“onChange”事件,已修复。 combobox:在Win10的IE11下单击下拉面板跳到页面底部,已修...

ejzhang
2018/02/15
908
6
回车自动提交 禁止回车自动提交 web开发 .

在开发过程中有时候需要回车自动提交,有时候有不不需要回车自动提交。很多人都喜欢用JS控制,但是用jS控制并不稳定 其实浏览器已经帮我们做好了这一补。。在网上找到了解答,如下。 今天遇到...

长平狐
2012/06/08
277
0
VIM使用系列:位置跳转和块模式

前面的系列中对于VIM中的函数及变量符号的跳转进行了简单的介绍,那也是在项目开发过程中用的最多的操作了。但是在这一个多月的项目开发中,我还是经常会需要在文件中进行各种非符号的跳转,...

水海云
2013/05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊flink的Async I/O

序 本文主要研究一下flink的Async I/O 实例 // This example implements the asynchronous request and callback with Futures that have the// interface of Java 8's futures (which is t......

go4it
20分钟前
0
0
一文详解微服务架构的数据设计

微服务是一个软件架构模式,对微服务的讨论大多集中在容器或其他技术是否能很好的实施微服务这些方面。 本文将从以下几个角度来和大家分享在微服务架构下进行数据设计需要关注的地方,旨在帮...

java菜分享
30分钟前
3
0
Java并发编程之美读书笔记-并发编程基础1

线程 进程是代码在数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,比如idea运行代码时的jvm是一个进程,但是CPU资源比较特殊,它是被分配到线程的,线程是进程的一个执行路...

hensemlee
43分钟前
1
0
【剑指offer纪念版】--10 进制1的个数

10. 题目 题目:请实现一个函数,输入一个整数,输出该数二进制表示中1的个数。例如把9表示成二进制是1001,有2位是1。因此如果输入9,该函数输出2。 解题思路   把一个整数减去1,再和原整...

细节探索者
58分钟前
2
0
本科毕业平均年薪 30 万!经济寒冬挡不住 AI 人才的火热!

互联网行业遭遇寒冬,企业纷纷裁员缩招,而 BAT 和硅谷明星公司对 AI 人才的投入却并不见放缓。为争夺相关人才,给应届毕业生开出的平均年薪高达 30 万。 而 TensorFlow 作为当下最流行的深度...

AI女神
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部