<!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. esigner中name和comment互換

    1 PowerDesigner中批量根据对象的name生成comment的脚本 执行方法:Open PDM -- Tools -- Execute Commands -- Run Script Opt ...

  2. kolla安装Queens版本OpenStack（ceph后端）

    OpenStack all-in-one部署: 本次部署为OpenStack Queens版本部署,使用All-in-one,单节点部署. 物理资源:8核,32GB,硬盘400GB(3个盘),2网卡. ...

  3. java输入输出 -- java NIO之缓存区Buffer

    一.简介 java NIO相关类在jdk1.4被引入,用于提高I/O的效率.java NIO包含很多东西,但核心的东西不外乎Buffer.channel和selector.本文先来看Buffer的实现 ...

  4. 数组、可变参数 、this关键字 （札记）

    Thinking in java 读书笔记(P84 ~ P104) 作者:淮左白衣 写于:2018年4月10日16:42:57 目录 this 为什么可以代表调用对象 数组 数组中的 length 定 ...

  5. centos7搭建EFK日志分析系统

    前言 EFK可能都不熟悉,实际上EFK是大名鼎鼎的日志系统ELK的一个变种 在没有分布式日志的时候,每次出问题了需要查询日志的时候,需要登录到Linux服务器,使用命令cat -n xxxx|grep ...

  6. Xamarin开发综述

    https://blog.csdn.net/qq_41647999/article/details/84844357 一. 前言这十来天对Xamarin的学习踩了很多的坑,说来也是一把心酸泪,下面为大 ...

  7. 使用element-ui中的el-upload组件时携带其他参数

    解决方法:// template <el-upload action="/api/oss/file/add" :headers="headers" // ...

  8. jQuery动画速成

    引入下面css中样式,然后在需要使用的元素中类上添加相应的效果就可以了 例如 animated固定要添加的类,不然会没有效果,bounceIn是你想要的动画效果,fight是你自己定义的类名,可以写样 ...

  9. 四、TreeSet

    HashSet 是无序的,如果要对集合实现排序,那么就需要使用TreeSet 让TreeSet 实现集合有序有两种方法 一.让元素自身具备比较排序功能,具备比较排序功能的元素只需要实现Comparab ...

  10. 周伯通的空明拳，米诺斯的星尘傀儡线，SAP Kyma的Serverless

    Jerry一直认为,金庸的<天龙八部>里的武学建模已经有点脱离传统武侠小说的范畴了,像已经走上玄幻道路的灵鹫宫"八荒六合唯我独尊功",以及杀伤力足够能被视为现代激光武器 ...