<!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的更多相关文章

  1. JavaScript中,返回上一个页面时,如何保证上一个页面的不刷新?

    history.back()和history.go(-1)都可以实现返回上一页并不刷新.History 对象包含用户(在浏览器窗口中)访问过的 URL. history.back() 等同于在浏览器点 ...

  2. Ceph删除OSD上一个异常object

    前言 ceph里面的数据是以对象的形式存储在OSD当中的,有的时候因为磁盘的损坏或者其它的一些特殊情况,会引起集群当中的某一个对象的异常,那么我们需要对这个对象进行处理 在对象损坏的情况下,启动OSD ...

  3. JAVA 从一个List里删除包含另一个List的数据

    /** * 从listA里删除listB里有的数据 * @param listA * @param listB * @return */ public static List<String> ...

  4. struts2一个和多个文件上传及下载

    struts2的文件上传相比我们自己利用第三方jar包(commons-fileupload-1.2.1.jar   commons-io-1.3.2.jar )要简单的多,当然struts2里面也是 ...

  5. 从一个Activity返回上一个Activity

    从一个Activity返回上一个Activity 要求:保留上一个Activity的数据 方法: 第一步:从Activity1转向Activity2时,用startActivityForResult而 ...

  6. 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的返回值自动进行各种序列化处理(序列化为 ...

  7. 【Taro全实践】6位验证码输入视觉分离（标准下划线分离）

    一.实现的效果图 二.实现思路 中间想过很多实现方法,但是因为input为原生组件的原因,很难适配所有手机直接. 所有如何实现适配所有手机的验证码分离输入呢?(思路如下) 1.input组件为原生组件 ...

  8. 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] 之外的 ...

  9. linux面试题：删除一个目录下的所有文件，但保留一个指定文件

    面试题:删除一个目录下的所有文件,但保留一个指定文件 解答: 假设这个目录是/xx/,里面有file1,file2,file3..file10 十个文件 [root@oldboy xx]# touch ...

随机推荐

  1. python 计算文件夹里所有内容的大小总和

    计算文件夹里所有内容的大小总和 递归方法 '''计算文件夹的大小''' import os def dir_file_size(path): if os.path.isdir(path): file_ ...

  2. Linux安装 PostgreSQL

    1.在线安装 yum install postgresql-server -y 2.初始化数据库 service postgresql initdb 3.设置自动启动 hkconfig postgre ...

  3. MySQL 新建用户，为用户授权，指定用户访问数据库

    1.登录MySQL mysql -u root -p 2.添加新用户(允许所有ip访问) create user 'test'@'*' identified by '123456';(test:用户名 ...

  4. python学习-46 时间模块

    时间模块 ····时间戳 print(time.time()) 运行结果: 1564294158.0389376 Process finished with exit code 0 ·····结构化时 ...

  5. 20191011-构建我们公司自己的自动化接口测试框架-Util的ClearData模块

    cleardata模块主要是用于在每次测试之前清除历史执行痕迹,主要代码如下: from Util.ParseExcel import * from ProVar.ProjConfigVar impo ...

  6. Django之ORM相关操作

    一般操作 常用的13个操作 <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 <3> get(** ...

  7. （二十九）JSP之国际化

    导入 <%@ taglib url="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 创建三个语 ...

  8. 在论坛中出现的比较难的sql问题：3(row_number函数 分组查询)

    原文:在论坛中出现的比较难的sql问题:3(row_number函数 分组查询) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所 ...

  9. 解析Illumina+PacBio组装策略

    解析Illumina+PacBio组装策略 (2016-12-08 13:21:58) 转载▼     基于Illumina和PacBio平台的“二加三”组装策略,巧妙的融合了PacBio平台超长读长 ...

  10. 清空windows系统网络配置

    清空windows系统网络配置 来源  https://www.cnblogs.com/lemon-rain/p/9569990.html 具体描述:qq,微信可用网,但其他不能用. 一.win+r ...