zoukankan      html  css  js  c++  java
  • input text框 输完一个自动跳到下一个

    <input type="text" name="sn1" maxlength="4" id="sn1"/> - <input type="text" name="sn2" maxlength="4" id="sn2"/> - <input type="text" name="sn3" maxlength="4" id="sn3"/> - <input type="text" name="sn4" maxlength="4" id="sn4"/>
    <script type="text/javascript">
        //输入序列号
        function device_verify() {
            var sn = $("#sn1").val() + $("#sn2").val() + $("#sn3").val() + $("#sn4").val();
            $(".loading_series").show(); //loading图标
            $("#device_msg").hide(); //错误序列号提示
            $(".verify_content").hide(); //请核对设备信息
            var purl = "http://192.168.0.155:8087/mc/rapi/v1/device/verify";
            var pparm = {
                "source": "12",
                "token": "444433-233332",
                "devicesn": sn,
                "imagewidth": 60,
                "imageheight": 60
            };
    
            $.ajax({
                cache: false,
                type: "GET",
                url: purl,
                data: pparm,
                dataType: "jsonp",
                jsonp: "callback",
    
                success: function(obj) {
                    if (obj.ret == '0') {
                        $(".device_pic img").attr("src", obj.imageurl);
                        $(".device_name").html(obj.devicetype);
                        $('.verify_content').show();
                        $("#device_msg").hide();
                        $(".loading_series").hide();
                        $("#a_step1").attr("href", 'bpdemo.req?html=step_2');
                    } else {
                        $(".loading_series").hide();
                        $(".verify_content").hide();
                        $("#device_msg").html(obj.msg).show();
                    }
                }
            });
        }
    
        $(document).ready(function() {
            $("#sn1").focus();
    
            //自动跳到下一个输入框  
            $("input[name^='sn']").each(function() {
                $(this).keyup(function(e) {
                    e = window.event || e;
                    var k = e.keyCode || e.which;
                    if (k == 8) {   //8是空格键
                        if ($(this).val().length < 1) {
                            $(this).prev().focus();
                            $(this).prev().focus(function() {
                                var obj = e.srcElement ? e.srcElement: e.target;
                                if (obj.createTextRange) { //IE浏览器
                                    var range = obj.createTextRange();
                                    range.moveStart("character", 4);
                                    range.collapse(true);
                                    range.select();
                                }
                            });
                        }
                    } else {
                        if ($(this).val().length > 3) {
                            $(this).next().focus();
                        }
                    }
                })
            });
    
            $("input[type='text'][id^='sn']").bind('keyup',
            function() {
                var len = $("#sn1").val().length + $("#sn2").val().length + $("#sn3").val().length + $("#sn4").val().length;
                if (len == 16) device_verify();
            });
    
        });
    </script>
  • 相关阅读:
    典型用户
    站立会议5
    站立会议4
    《构建之法》阅读笔记05-需求分析
    站立会议3
    编写Android程序Eclipse连不上手机。
    站立会议2
    站立会议1
    第七周学习进度
    shiro之 散列算法(加密算法)
  • 原文地址:https://www.cnblogs.com/vincent_ds/p/2740119.html
Copyright © 2011-2022 走看看