<!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. cocos creator 判断滑动方向

    定义变量 public firstX = null; public firsty = null; 点击 获取坐标 this.viewNode.on(cc.Node.EventType.TOUCH_ST ...

  2. 网站架构（LNMP）

    说明: 1)LNMP架构的组成(作用) 2)LNMP架构的部署 3)LNMP架构通讯原理 4)LNMP服务之间如何建立管理 nginx+php   运维负责 php+mysql   开发负责 5) 运 ...

  3. 《Mysql - 优化器是如何选择索引的？》

    一:概念 - 在 索引建立之后,一条语句可能会命中多个索引,这时,索引的选择,就会交由 优化器 来选择合适的索引. - 优化器选择索引的目的,是找到一个最优的执行方案,并用最小的代价去执行语句. 二: ...

  4. java访问磁盘文件

    转载,务必写上原文链接 !(尊重与你分享知识的人) 目录 文件 File 对象 VS FileDescriptor 对象 文件讲解java访问磁盘文件过程 fileReader.read() 图解ja ...

  5. Mathtype 问题汇总(3)

    1. 调整行间距 2. 调整字号 在 MathType 中,选择「大小 > 定义」将对话框中「完整」所对应的值改为和文字大小匹配的pt(磅值),这样便可以解决在文字编写的 Word 文档中某一行 ...

  6. SAS学习笔记31 SAS随机分组方法及实现

    随机分组方法包括: 简单随机化(simple randomization) 区组随机化(block randomization) 分层随机化(stratified randomization) 分层区 ...

  7. MySQL中的索引详讲（转）

    https://www.cnblogs.com/whgk/p/6179612.html

  8. Markdown中有序列表和无序列表

    最近有用户问我,在简书写 Markdown, 一条有序列表 item 之后接一条无序列表 item,为什么 parse 的结果,第二个 item 依旧是作为有序列表的第二项显示,带有有序列表的列表符号 ...

  9. （九）Struts标签基础（二）

    2.3 非表单标签 2.3.1 <s:actionerror>标签, this.addActionError("错误信息1");   //使用addActionErro ...

  10. JDBC 复习2 存取mysql 大数据

    大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据 mysql的大数据分为2种 blob 和 text ,没有cl ...