最近做了一个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设计特效自动分割 1.两种样式,即整行输入,满4个字符默认空格分割,另一种就是分四个input输入,输入完自动跳转下一个input 2.此资源纯HTML设计布局,非带功能
主要为大家详细介绍了vue实现输入框自动跳转功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
网页回车后form自动提交,跑到其他页面 有个查询的form,本来是希望点击查询时才查询的,结果测试到回车时跑到其他页面去了。 复制代码代码如下: <form action=”notice.php” method=”get”> … <...
输入框自动补全功能并实现与PHP交互,点击选中行后记录当前数据到本地cookie,同时可以跳转页面。 功能点: 输入框输入数值之后自动取服务端数据。 当输入框为空的时候 显示 缓存数据。 缓存数据最多显示 5 个,...
要点:如果您输入任何其他网址,您将被自动重定向。 输入产品代码(存在于数据库中)。如果商品代码有效,库存商品数量将一一增加。 要点:它应该是由条形码阅读器输入的。 Tab或Return确认输入。 您还可以通过跳转...
输入框输入时自动屏蔽键盘导航功能需要将页面中的 input 节点作为导航组件的参数,具体设置见后面参数配置。 获取图标采用的是读取网站根目录下 favicon.ico,如果 favicon 不在根目录下,那么会请求不到。 下载 ...
语言:English 允许您从任何地方跳转到任何supreddit。 ... 这个延期适合您! 只需按“/ R /”图标,输入要跳转的子文件... changelog: V1.1: - 空的输入字段默认为/ r /全部 -Input字段现在自动聚焦 -POPUP自动关闭跳转
比较详实 第三章: C语言程序设计初步 C语言程序设计 本课介绍C语言程序设计的基本方法和基本的程序语句。 从程序流程的角度来看,程序可以分为三种基本结构, 即顺序结构、分支...printf("input a,b,c\n"); scanf...
需求 例如在搜索框中,并不是你输入一个字就需要渲染一次数据,而是取最后一次的输入内容进行搜索...input type="text" v-model="message"> [removed] import axios from "axios"; export default { data(){ retu
combobox:修复在Windows10的IE11下点击下拉面板会自动跳转到底部的问题; datebox:修复点击'Today'按钮时不会触发onSelect事件的问题; propertygrid:修复在仅编辑了一行数据的时候调用'getChanges'方法无法获取...
13.10 超过时间页面自动跳转 13.11 分时段问候用户 13.12 获取服务器时间 13.13 倒计时显示 13.14 背景时钟 13.15 计算某天星期几 13.16 计算时间差 13.17 计算网页停留时间 13.18 记录页面的修改时间 13.19 将日期...
13.10 超过时间页面自动跳转 13.11 分时段问候用户 13.12 获取服务器时间 13.13 倒计时显示 13.14 背景时钟 13.15 计算某天星期几 13.16 计算时间差 13.17 计算网页停留时间 13.18 记录页面的修改时间 13.19 将日期...
- 选中优化,文件&文件夹重命名、文件&文件夹新建 后自动选中。(f5增加回调。); - 选中保持,选中后如果调整排序等等,保持选中状态。 - 上传文件选中当前。 - f5改为异步(加入mask loading) 优化文件夹打开体验 ...
3.[改进]为了后台系统安全,后台登录页不用判断是否已登录状态并自动跳转到管理页 4.[改进]后台编辑器CKEditor V3.6.1升级到CKEditor V3.6.6 5.[改进]前台编辑器KindEditor V3.5.5升级到KindEditor V3.5.6 6.[纠正]...
⑦、在这个对话框中是设置封装元件的名称的,在文本输入框输入即可,输入好后单击“Next”; ⑧、进入向导完成对话框,单击“Finish”结束向导。如果我们创建的是DIP元件,基本已经完成,但是我们创建的不是DIP元件...
退休后,自由开发和照顾孩子占用了他大部分的时光。Peter是AngularJS社区的名人。他最近加入了Google的AngularJS团队。他还是Angular UI项目的创始成员。他曾在Devoxx UK和其他活动中发表过有关AngularJS的演讲,并...
/// 格式后的异常信息字符串,包括异常内容和跟踪堆栈. /// /// public static String FormatException(Exception ex, String catchInfo) { StringBuilder strBuilder = new StringBuilder(); if (catchInfo != ...
/// 格式后的异常信息字符串,包括异常内容和跟踪堆栈. /// /// public static String FormatException(Exception ex, String catchInfo) { StringBuilder strBuilder = new StringBuilder(); if ...