<!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. linux防火墙学习

    iptables命令是Linux上常用的防火墙软件,是netfilter项目的一部分.可以直接配置,也可以通过许多前端和图形界面配置.语法: iptables(选项)(参数)1,命令选项-t<表 ...

  2. UIPath工具来取得邮件里面的添付文件及邮件内容

    下图是得到Outlook邮件附件的示意图 下面的图是对UIPath的属性的设定.最重要的是两个文件夹要保持一致.

  3. Feign【开启GIZP压缩】

    SpringCloudFeign支持对请求和响应进行gzip压缩,以此来提高通信效率. 1.搭建gzip-demo工程 1.1.工程依赖: <parent> <groupId> ...

  4. （二）javaweb开发的常见概念总结（来自那些年的笔记）

    目录 WEB开发相关知识 WEB服务器 Tomcat服务器 WEB应用程序 配置WEB应用 配置缺省的WEB应用 Web设置首页 web.xml文件 配置虚拟主机 配置https连接器 为我们的网站, ...

  5. C++Primer 5th Chap8 The IO Library

    IO类: 头文件 类型 iostream istream,从流读取数据 ostream,向流写入数据 iostream,读写流 fstream ifstream,从文件读取数据,默认in模式打开 of ...

  6. Centos 修改IP地址、网关、DNS

    一.CentOS 修改IP地址   修改对应网卡的IP地址的配置文件 # vi /etc/sysconfig/network-scripts/ifcfg-eth0   电信 # vi /etc/sys ...

  7. Vs2019 C# .net core 将证书添加到受信任的根证书存储失败，出现以下错误：访问控制列表（ACL）结构无效

    https://www.cnblogs.com/xiyuan/p/10632579.html 使用 vs2017 创建一个 ASP.NET Core Web 应用程序 -> Ctrl + F5 ...

  8. HTTP协议 学习

    HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的过程.客户端连上web服 ...

  9. 听课笔记--DP--Authentication Failed

    Authentication Failed https://www.codechef.com/problems/AUTHEN/ 从一个长为N+K的由小写字母组成的字符串中删去K个字符, 可以得到多少种 ...

  10. 基于【 centos7】三 || 分布式文件系统FastDFS+Nginx环境搭建

    1. FastDFS介绍 1.1 FastDFS定义 FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用 ...