验证码输入自动聚焦下一个input或者删除自动聚焦上一个input
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>验证码输入自动聚焦下一个input或者删除自动聚焦上一个input</title>
</head>
<style type="text/css">
body{
background-color: #E6E6FA;
}
.center{
display: flex;
width: 400px;
height: 400px;
margin: 0 auto;
}
input{
flex: 1;
height: 100px;
font-size: 40px;
text-align: center;
}
.now{
width:70px;
heigth:70px;
border:1px #cccccc solid;
}
.now:focus{
border:1px #587d18 solid;
}
</style>
<body>
<img src='验证码地址'>
<div class="center">
<input type='text' name='code[]' class='now' maxlength="1"/>
<input type='text' name='code[]' class='now' maxlength="1"/>
<input type='text' name='code[]' class='now' maxlength="1"/>
<input type='text' name='code[]' class='now' maxlength="1"/>
</div> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
/* $('.now').keyup(function(){
if($(this).index()<4) {
$(this).next('input').focus();
}
});
*/ $("input[name^='code']").each(function(){
$(this).keyup(function(e){
if($(this).val().length < 1){
$(this).prev().focus();
}else{
if($(this).val().length >= 1){
$(this).next().focus();
}
}
}); }); </script>
</body> </html>
验证码输入自动聚焦下一个input或者删除自动聚焦上一个input的更多相关文章
- JavaScript中,返回上一个页面时,如何保证上一个页面的不刷新?
history.back()和history.go(-1)都可以实现返回上一页并不刷新.History 对象包含用户(在浏览器窗口中)访问过的 URL. history.back() 等同于在浏览器点 ...
- Ceph删除OSD上一个异常object
前言 ceph里面的数据是以对象的形式存储在OSD当中的,有的时候因为磁盘的损坏或者其它的一些特殊情况,会引起集群当中的某一个对象的异常,那么我们需要对这个对象进行处理 在对象损坏的情况下,启动OSD ...
- JAVA 从一个List里删除包含另一个List的数据
/** * 从listA里删除listB里有的数据 * @param listA * @param listB * @return */ public static List<String> ...
- struts2一个和多个文件上传及下载
struts2的文件上传相比我们自己利用第三方jar包(commons-fileupload-1.2.1.jar commons-io-1.3.2.jar )要简单的多,当然struts2里面也是 ...
- 从一个Activity返回上一个Activity
从一个Activity返回上一个Activity 要求:保留上一个Activity的数据 方法: 第一步:从Activity1转向Activity2时,用startActivityForResult而 ...
- ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...
- 【Taro全实践】6位验证码输入视觉分离(标准下划线分离)
一.实现的效果图 二.实现思路 中间想过很多实现方法,但是因为input为原生组件的原因,很难适配所有手机直接. 所有如何实现适配所有手机的验证码分离输入呢?(思路如下) 1.input组件为原生组件 ...
- java—数组乘积输入: 一个长度为n的整数数组input 输出: 一个长度为n的数组result,满足result[i] = input数组中,除了input[i] 之外的所有数的乘积,不用考虑溢出例如 input {2, 3, 4, 5} output: {60, 40, 30, 24}
/** * 小米关于小米笔试题 数组乘积输入: 一个长度为n的整数数组input 输出: 一个长度为n的数组result,满足result[i] = * input数组中,除了input[i] 之外的 ...
- linux面试题:删除一个目录下的所有文件,但保留一个指定文件
面试题:删除一个目录下的所有文件,但保留一个指定文件 解答: 假设这个目录是/xx/,里面有file1,file2,file3..file10 十个文件 [root@oldboy xx]# touch ...
随机推荐
- 工作总结--CTO(张王岩)IO的正式使用
4个抽象类 InputStreawm int read() void close() OutputStream void write(int) void flush() void close() R ...
- activate-power-mode安装与设置
Window-->activate-power-mode-->去掉combo/shake,其他三个全勾上,现在用起来就很爽了,赶紧体验吧.
- [转帖]CentOS 8.0.1905 和CentOS Stream(滚动发行)正式发布
CentOS 8.0.1905 和CentOS Stream(滚动发行)正式发布 https://zhuanlan.zhihu.com/p/84001292 还发现openssl 的 版本太高 不兼容 ...
- Redis 常用命令学四:列表类型命令
1.在列表两端增加值的命令 127.0.0.1:6379> lpush 1 (error) ERR wrong number of arguments for 'lpush' command 1 ...
- Redis 常用命令学习三:哈希类型命令
1.赋值与取值命令 127.0.0.1:6379> hset stu name qiao (integer) 1 127.0.0.1:6379> hset stu sex man (int ...
- Python基础 第6章 抽象
1. 引言及抽象和结构 生成斐波那契数列的代码如下: fibs = [0, 1] num = int(input('How many num you want:')) for x in range(n ...
- Python——类和对象(一)
一.定义类 在面向对象的程序设计中有两种重要概念: 类:可以理解为一个种类,一个模型,是一种抽象的东西. 实例.对象:可以理解为一种具体制作或者存在的东西. 定义类的语法格式如下: class 类名: ...
- 1201: 位运算之拼整数(Java)
WUSTOJ 1201: 位运算之拼整数 题目 原题链接 参考博客 XXXXXyun的博客--输入十六进制数 Description 输入无符号短整数k[hex.]和p[oct.],将k的高字节作为结 ...
- vmstat命令详解--转载
一.前言 vmstat命令: 用来获得有关进程.虚存.页面交换空间及 CPU活动的信息.这些信息反映了系统的负载情况 二.虚拟内存运行原理 在系统中运行的每个进程都需要使用到内存,但不是每个进程都需 ...
- Windows计划任务无法写Log的问题
参照:https://www.cnblogs.com/jonezzz/p/10364153.html 使用WIndows计划任务去执行Exe文件时无法写Log,而Exe双击执行就能写Log,这是由于计 ...