文档章节

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

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
回车自动提交 禁止回车自动提交 web开发 .

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

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

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

水海云
2013/05/29
0
0
ruby:在一个文本框中输入文本后,怎么通过ENTER键确认输入

在一个文本框中输入文本后,下面出现下来选择框。可以由两种方式确认输入: 一是输入文本后,直接按enter键 二是到下拉选择框中选择一个,按回车键 这两种方式应该怎么用watir-ruby实现?...

girlnotboy
2012/11/23
737
2

没有更多内容

加载失败,请刷新页面

加载更多

初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
9
0
现场看路演了!

HiBlock
昨天
19
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
12
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
20
0
TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部