zoukankan      html  css  js  c++  java
  • 数字验证码多个输入框实现一个输入框效果

    html核心代码如下:

    <p class="iptCodeTip">请输入短信中的6位验证码</p>
        <div class="checkedCode">
            <%--<input type="text" maxlength="6" id="iptCode">--%>
            <div class="getCodeMsg">
                <input type="tel" maxlength="1" name="code" pattern="[0-9]*" />
                <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
                <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
                <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
                <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
                <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
            </div>
            <a id="sendMsgRepet">重新发送</a>
            <a id="countLast" style="display: none"><label>60</label>秒后重新发送</a>
        </div>
    

     对应的css如下:

    .iptCodeTip{color: #000;font-size: 14px;line-height: 40px;text-align: center}
    .checkedCode{padding: 0 48px;overflow: hidden}
    .checkedCode a{float: right;font-size: 13px;color: #000000;text-decoration: underline;line-height: 13px}
    .checkedCode input{padding: 0;margin:10px 0;12%;margin-right: 5.6%;text-align: center;display: block;float: left;height: 35px;border: solid 1px #898989;border-radius: 0;}
    .checkedCode input:last-child{margin-right: 0}
    

     核心js如下:

    $('.getCodeMsg input').keyup(function (event) {
            // 删除往前 添加往后
            if($(this).index()<6) {
                if(event.keyCode==46 || event.keyCode==8) {
                    $(this).prev('input').focus();
                }else {
                    $(this).next('input').focus();
                }
            }
        })
    

     显示效果图如下:

  • 相关阅读:
    linq教程
    linq 多表分组查询统计
    System.Diagnostics.Trace.Listeners
    linq多表join与group
    LINQ的左连接、右连接、内连接
    linq pad
    开源项目
    linq group join
    OWIN OAuth 2.0 Authorization Server
    autofac + owin + webform + mvc + webapi集成demo
  • 原文地址:https://www.cnblogs.com/yangqing22/p/14070723.html
Copyright © 2011-2022 走看看