`

input输入后自动跳转

    博客分类:
  • html
 
阅读更多

最近做了一个input输入后根据input输入框的长度自动跳转,并且变色的功能,包括适用单独的某个input 或者整个table

 

单独input 的处理

<script type="text/javascript">
function changebg(obj){
		var currObj = document.getElementById( obj.id);
		currObj.style.backgroundColor = 'B0E0E6';
		if (currObj.value.length == currObj.maxLength) {
			currObj.style.backgroundColor = 'white';
			var nextObj = $(obj).parent().next().find("input");
			if (nextObj[0] != null) {
				nextObj[0].focus();
				nextObj[0].style.backgroundColor ='B0E0E6';
				//nextObj.addClass('selected')
			}
		}
    }

   function removeStyle(obj){
        var currObj = document.getElementById(obj.id);
        currObj.style.backgroundColor = '';
    }
</script>	

 

  适合整个table的情况:如下

window.onload = function(){
    var table_1 = document.getElementById("table1");
    var rows_1 = table_1.rows;
    for (var i = 0, leni = rows_1.length; i < leni; i++) {
        var cells_1 = rows_1[i].cells;
        for (var j = 0, lenj = cells_1.length; j < lenj; j++) {
            var input_1 = cells_1[j].children[0];
            input_1.id =  'table_1_'+ i + '_' + j;
            input_1.maxlength = 1;
            var td_c = new changebg(i, leni - 1, j, lenj - 1,'table_1_');
            input_1.onkeyup = td_c.oper;
            input_1.onblur = td_c.oper2;
        }
    }
    
  
function changebg(i, leni, j, lenj,tab_id){
	this.oper = function(){
		var currObj = document.getElementById( tab_id + i + '_' + j);
		currObj.style.backgroundColor = 'B0E0E6';
		if (currObj.value.length == currObj.maxlength) {
			currObj.style.backgroundColor = 'white';
			var nextObj = j < lenj ? document.getElementById(tab_id + i + '_' + (j + 1)) : i < leni ? nextObj = document.getElementById((tab_id + i + 1) + '_0') : null;
			if (nextObj != null) {
				nextObj.focus();
				nextObj.style.backgroundColor = 'B0E0E6';
			}
		}
	}
	
	this.oper2 = function(){
        var currObj = document.getElementById(tab_id + i + '_' + j);
        currObj.style.backgroundColor = '';
    }

}


 

 

 

 

分享到:
评论

相关推荐

    HTML防伪码查询网页表单input设计特效自动分割

    HTML防伪码网页表单input设计特效自动分割 1.两种样式,即整行输入,满4个字符默认空格分割,另一种就是分四个input输入,输入完自动跳转下一个input 2.此资源纯HTML设计布局,非带功能

    vue实现输入框自动跳转功能

    主要为大家详细介绍了vue实现输入框自动跳转功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    网页中回车后form自动提交跳到其他页面的解决方法

    网页回车后form自动提交,跑到其他页面 有个查询的form,本来是希望点击查询时才查询的,结果测试到回车时跑到其他页面去了。 复制代码代码如下: &lt;form action=”notice.php” method=”get”&gt; … &lt;...

    js-autocomplete-cookie:输入框自动补全 + 记录搜索缓存

    输入框自动补全功能并实现与PHP交互,点击选中行后记录当前数据到本地cookie,同时可以跳转页面。 功能点: 输入框输入数值之后自动取服务端数据。 当输入框为空的时候 显示 缓存数据。 缓存数据最多显示 5 个,...

    tutorial-web-input:您可以了解如何从 Web 更新数据库。 (v14 +)

    要点:如果您输入任何其他网址,您将被自动重定向。 输入产品代码(存在于数据库中)。如果商品代码有效,库存商品数量将一一增加。 要点:它应该是由条形码阅读器输入的。 Tab或Return确认输入。 您还可以通过跳转...

    leetcode题库-keyboardnavigation:基于React简洁实用键盘导航组件

    输入框输入时自动屏蔽键盘导航功能需要将页面中的 input 节点作为导航组件的参数,具体设置见后面参数配置。 获取图标采用的是读取网站根目录下 favicon.ico,如果 favicon 不在根目录下,那么会请求不到。 下载 ...

    Subreddit Jumper-crx插件

    语言:English 允许您从任何地方跳转到任何supreddit。 ... 这个延期适合您! 只需按“/ R /”图标,输入要跳转的子文件... changelog: V1.1: - 空的输入字段默认为/ r /全部 -Input字段现在自动聚焦 -POPUP自动关闭跳转

    C语言程序设计标准教程

    比较详实 第三章: C语言程序设计初步 C语言程序设计 本课介绍C语言程序设计的基本方法和基本的程序语句。 从程序流程的角度来看,程序可以分为三种基本结构, 即顺序结构、分支...printf("input a,b,c\n"); scanf...

    vue中axios防止多次触发终止多次请求的示例代码(防抖)

    需求 例如在搜索框中,并不是你输入一个字就需要渲染一次数据,而是取最后一次的输入内容进行搜索...input type="text" v-model="message"&gt; [removed] import axios from "axios"; export default { data(){ retu

    jquery-easyui-EDT-1.5.5.7z

    combobox:修复在Windows10的IE11下点击下拉面板会自动跳转到底部的问题; datebox:修复点击'Today'按钮时不会触发onSelect事件的问题; propertygrid:修复在仅编辑了一行数据的时候调用'getChanges'方法无法获取...

    《程序天下:JavaScript实例自学手册》光盘源码

    13.10 超过时间页面自动跳转 13.11 分时段问候用户 13.12 获取服务器时间 13.13 倒计时显示 13.14 背景时钟 13.15 计算某天星期几 13.16 计算时间差 13.17 计算网页停留时间 13.18 记录页面的修改时间 13.19 将日期...

    程序天下:JavaScript实例自学手册

    13.10 超过时间页面自动跳转 13.11 分时段问候用户 13.12 获取服务器时间 13.13 倒计时显示 13.14 背景时钟 13.15 计算某天星期几 13.16 计算时间差 13.17 计算网页停留时间 13.18 记录页面的修改时间 13.19 将日期...

    KODExplorer 芒果云-资源管理器

    - 选中优化,文件&文件夹重命名、文件&文件夹新建 后自动选中。(f5增加回调。); - 选中保持,选中后如果调整排序等等,保持选中状态。 - 上传文件选中当前。 - f5改为异步(加入mask loading) 优化文件夹打开体验 ...

    文章管理系统

    3.[改进]为了后台系统安全,后台登录页不用判断是否已登录状态并自动跳转到管理页 4.[改进]后台编辑器CKEditor V3.6.1升级到CKEditor V3.6.6 5.[改进]前台编辑器KindEditor V3.5.5升级到KindEditor V3.5.6 6.[纠正]...

    protel2004封装

    ⑦、在这个对话框中是设置封装元件的名称的,在文本输入框输入即可,输入好后单击“Next”; ⑧、进入向导完成对话框,单击“Finish”结束向导。如果我们创建的是DIP元件,基本已经完成,但是我们创建的不是DIP元件...

    精通AngularJS part1

    退休后,自由开发和照顾孩子占用了他大部分的时光。Peter是AngularJS社区的名人。他最近加入了Google的AngularJS团队。他还是Angular UI项目的创始成员。他曾在Devoxx UK和其他活动中发表过有关AngularJS的演讲,并...

    ASP.NET常用代码

    /// 格式后的异常信息字符串,包括异常内容和跟踪堆栈. /// /// public static String FormatException(Exception ex, String catchInfo) { StringBuilder strBuilder = new StringBuilder(); if (catchInfo != ...

    ASP.NET程序中常用的三十三种代码.txt

     /// 格式后的异常信息字符串,包括异常内容和跟踪堆栈.  ///  ///  public static String FormatException(Exception ex, String catchInfo)  {  StringBuilder strBuilder = new StringBuilder();  if ...

Global site tag (gtag.js) - Google Analytics