简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
  •  
    您现在的位置:首页 >> JS >> 内容

    JavaScript实现PC端四格密码输入框功能

    内容摘要:!DOCTYPE htmlhtmlheadmeta charset='UTF-8'title四个密码输入框/titlescript type='text/javascript' src='jquery.min.js' /script/headstyle type='text/css'input{ width:40px; height:40px; text-a......

      <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>四个密码输入框</title>

    <script type="text/javascript" src="jquery.min.js" ></script>

    </head>

    <style type="text/css">

    input{

    width:40px;

    height:40px;

    text-align: center;

    font-size:22px;

    }

    </style>

    <body>

    支付密码

    <input type="password" name="pwd1" maxlength="1"/>

    <input type="password" name="pwd2" maxlength="1"/>

    <input type="password" name="pwd3" maxlength="1"/>

    <input type="password" name="pwd4" maxlength="1"/>

    </body>

    <script>

    //必须引入jquery才可以用

    //1:当输入框1输入1个字符后,自动切换光标到输入框2

    $(document).ready(function(){

    $("[name='pwd1']").bind("input",function(){

    if($(this).val().length==1){

    $("[name='pwd2']").focus();

    }

    })

    $("[name='pwd2']").bind("input",function(){

    if($(this).val().length==1){

    $("[name='pwd3']").focus();

    }else if($(this).val().length==0){

    $("[name='pwd1']").focus();

    }

    })

    $("[name='pwd3']").bind("input",function(){

    if($(this).val().length==1){

    $("[name='pwd4']").focus();

    }else if($(this).val().length==0){

    $("[name='pwd2']").focus();

    }

    })

    $("[name='pwd4']").bind("input",function(){

    if($(this).val().length==0){

    $("[name='pwd3']").focus();

    }


    })

    })

    </script>

    </html>

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/2/19 发布时间:14:49:38 点击:1225 
  • 上一篇:JS实现音乐钢琴特效
  • 下一篇:Javascript刷新页面的几种方法
  • 本类新增
    本类热门文章
    Baidu
    壹 家 软 件 工 作 室(YiJia SoftWare Workroom) 齐天大圣® 制 作 ©2000-2020

    本空间由景安网络提供,百度云加速提供加速防护
    YiJiaCMS V3.31 Build 20.6.5(MSSQL) 闽ICP备05000814号-1