lane online

心平凡,自不凡

  • 莱恩在线
  • web攻城狮诱惑
  • 2B青年的文艺之路
  • 凡眼看世界
  • 我的电邮

技能树展示

Front-end frame

Bootstrap、AngularJS、react、vue

html&js&css

对js框架应用(如jQuery/typescript/layui等)有一定的经验; CSS3、JavaScript(es6)、jquery)、h5页面 less、sass技术(混编、指令、函数等方面应用) gurnt前端打包工具、webpack前端工具

vi&ui

Photoshop、illustrator
View More

思绪边缘

我时常想象自己沿着视野里的湖边一遍一遍的走着,看着春天的枝叶发出新芽,夏天里漫天飞舞的柳絮,秋日里被寒霜染红的落叶,冬日里最最欣喜的漫山遍野的雪景,料想这原本就是自己的一生,但自从遇见了不安,便让自己脱离里梦境,游走在时间与欲望的边缘,时而快乐着时而忧伤着的挥霍自己的青春。

web攻城狮诱惑

html5验证码自动切换焦点

时间:2019年08月21日 信息来源:本站原创 点击:次

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #verificationCode input {

            width: 40px;

            height: 40px;

            font-size: 24px;

            text-align: center;

        }

    </style>

</head>

<body>

<div id="verificationCode">

    <input type="text" maxlength="1" />

    <input type="text" maxlength="1" />

    <input type="text" maxlength="1" />

    <input type="text" maxlength="1" />

    <input type="text" maxlength="1" />

    <input type="text" maxlength="1" />

</div>

<script>

    const verificationCodeInputs = document.querySelectorAll('#verificationCode input');

    verificationCodeInputs.forEach((input, index) => {

        input.addEventListener('input', (e) => {

            const currentInput = e.target;

            const nextInput = verificationCodeInputs[index + 1];

            const previousInput = verificationCodeInputs[index - 1];


            if (currentInput.value !== '') {

                currentInput.value = currentInput.value[0]; // Only allow single character input

                if (nextInput && currentInput.value !== '') {

                    nextInput.focus(); // Move focus to the next input box

                }

            } else if (previousInput) {

                previousInput.focus(); // Move focus to the previous input box

            }

        });

    });

</script>

</body>

</html>


相关新闻

  • html5验证码自动切换焦点
  • 关于vue2中nextTick的理解
  • elementui级联选择器显示错位bug解决
  • vue项目打包部署
  • 使用WxParse.wxParse之详情页面部分安卓手机无法显示bug
  • 网站首页|
  • 给我发邮件|
  • 码云

Copyright © 2024laneol All rights reserved. 莱恩在线 网站备案:京ICP备2022036069号-1