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

文本框如下:

<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;
}
时间: 2024-10-26 02:03:20

按回车键自动跳到下一个文本框的相关文章

js input框输入1位数字后自动跳到下一个input框聚焦

// input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); for(var i = 0; i<txts.length;i++){ var t = txts[i]; t.index = i; t.setAttribute("readonly", true); t.onkeyup=function(){ this.value=this.value.

表单文本框光标自动移动到下一个文本框内

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jstest</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript&qu

回车跳到下一个EDIT

1.按下方法procedure TForm2.Edit1KeyDown(Sender: TObject; var Key: Word; Shift: TShiftState);begin if Key=VK_RETURN then SelectNext(ActiveControl,true,true);end; 2.按下经过procedure TForm2.Edit1KeyPress(Sender: TObject; var Key: Char);begin 方法1: if key=#13 th

每次打开新标签页,都会提示“无法访问此网站”。并自动跳转到一个地址

使用该版本的chrome后,每次打开新标签页,都会提示"无法访问此网站".并自动跳转到一个地址"http://www.google.com.hk/url?sa=p&hl=zh-CN&pref=hkredirect&pval=yes&q=http://www.google.com.hk/_/chrome/newtab-"说明问题是因为此处访问google使用的地址是http协议.解决方式如下:输入:chrome://net-intern

Scanner类throwFor(Unknown Source)及跳过下一个扫描器分析

在使用Scanner类时遇到一个问题: 1 Exception in thread "main" java.util.NoSuchElementException 2 at java.util.Scanner.throwFor(Unknown Source) 3 at java.util.Scanner.next(Unknown Source) 在执行scanner.next()时遇到异常.Stack Overflow上给出了问题原因与解决办法. 原因:当一个类中两个及两个以上的Sca

解决iPhone上select时常失去焦点,随意跳到下一个输入框,影响用户操作

window.addEventListener('load', function() { FastClick.attach(document.body); }, false); //300s延迟,解决iPhone上select时常失去焦点,随意跳到下一个输入框,影响用户操作 结合fastclick.min.js使用

HTML中输入框自动切换到下一个

最近看了部关于乔布斯的电影,感觉里面的电影情节还是很棒的. 就是软件开发者一定要考虑到用户的感受,一定要能非常简单的使用起来. 最近感觉公司的一些平台还是存在很多不好使用的地方.比如输入IP的输入框. 现在的设计是需要用户输入点号. 我想能不能设计成类似于windows的那种输入的方式. 设计为四个输入框,其中点号已经添加进去了. 其中那一段脚本必须要放入body内,否则无法识别到这个函数 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans

javascript 获取光标所选中的内容并插入到另一个文本框中(兼容ie和ff)

项目中正好用到 做下笔记方便以后查找 ie获取光标的位置使用document.selection.createRange() 火狐下使用document.getElementById(id).selectionStart 和 document.getElementById(id).selectionEnd 假设我们要获得id为txt的Textarea元素里面光标所选择的内容 首先创建一个获得光标所选内容的函数(参数:火狐下需要Dom元素 select_field=document.getElem

js 判断一个文本框是否获得焦点

1.js 判断一个文本框是否获得焦点 // 可以用document.activeElement判断 // document.activeElement表示当前活动的元素 // 查找你要判断的文本框 var myInput = document.getElementById('myInput'); if (myInput == document.activeElement) {     alert('获取焦点'); } else {     alert('未获取焦点'); } 2.文本框获取焦点后