<!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. MVC之自定义过滤器(ActionFilterAttribute)

    一.自定义Filter 自定义Filter需要继承ActionFilterAttribute抽象类,重写其中需要的方法,来看下ActionFilterAttribute类的方法签名. //表示所有操作 ...

  2. Dapper.NET—轻量ORM

    Dapper.NET使用 本文目录 Dapper.NET使用 1.为什么选择Dapper 2.以Dapper(4.0)为例. 2.1 在数据库中建立几张表. 2.2实体类. 3.使用方法 3.1  一 ...

  3. Temporal IR (Chapter3 -Temporal Infroamtion Extraction)

    不管是文档,还是查询中,都显式或者隐式地包含了可以被利用的时间信息. 提取出来的时间信息可以用作构成“时间简历”(temporal profile)用于多种对象,比如实体和事件. 在时间信息中,最容易 ...

  4. Spring IoC 详解(四)

    Spring IoC 概述 IoC:Inverse of Control(控制反转) 为了更好的理解用可以这样通俗易懂的这样讲:IOC主要是说是new一个类来使用,方式分为:开发这手动创建和Sprin ...

  5. OOP_面向对象程序设计概述

    李际军老师"面向对象程序设计"课程第一课笔记整理 面向对象程序设计概述 20世纪90年代以来面向对象程序设计(Object Oriented Programming, 简称OOP) ...

  6. Centos7.3安装jenkins

    安装jenkins         下载地址: https://jenkins.io/download/最新版本         将Jenkins上传到tomcat的webapp目录          ...

  7. 笔记-6：mysql索引

    1.索引概述 建立索引的目的:加快数据库检索的速度. mysql中索引主要分为: 普通索引:使用index或key关键字创建,其索引列值可以取空值或重复值. 唯一性索引:使用关键字UNIQUE创建,其 ...

  8. 【C#】课堂知识点#1

    标准数字格式字符串 https://docs.microsoft.com/zh-cn/dotnet/standard/base-types/standard-numeric-format-string ...

  9. Scratch—点亮生日蜡烛

    过生日是小朋友们创作Scratch作品经常会用到的素材,今天介绍使用一些基础技能来点亮生日蜡烛的实现方法. 1.角色设计只有三种:生日蛋糕.未点燃的蜡烛.已点燃的蜡烛. 2.未点燃的蜡烛:在程序启动时 ...

  10. pytorch入门1——简单的网络搭建

    代码如下: %matplotlib inline import torch import torch.nn as nn import torch.nn.functional as F from tor ...