locked
how to jump to next/previous field when input numeric in num pad RRS feed

  • Question

  • User-583959464 posted

    $(function () {
            var smsCodes = $('.digitFormat');
            function goToNextInput(e) {
                var key = e.which,
                    t = $(e.target),
                   
                    sib = t.closest('span').next().find('.digitFormat');

               
               
                if (key != 96 && key != 46 && key != 9 && key != 8 && (key < 48 || key > 57) && (key < 96 || key > 105)  ) {
                  
                    e.preventDefault();
                    return false;
                }
                
                

              
                if (key == 46 || key == 9 || key == 8 || (key >= 96 && key <=105)) {
                   
                    return true;
                }


              
                if (!sib || !sib.length) {
                    console.log("!sib || !sib.length");
                    
                    sib = $('.smsCode').eq(0);
                    console.log(sib);
                }
                sib.select().focus();
            }

            function onKeyDown(e) {
                var key = e.which;

                
                if (key == 46 || key == 9 || key == 8 || key==96 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105 )) {
                    return true;
                }
              

                e.preventDefault();
                return false;
            }
            

            function onFocus(e) {
                $(e.target).select();
            }

            smsCodes.on('keyup', goToNextInput);
            smsCodes.on('keydown', onKeyDown);
            smsCodes.on('click', onFocus);

        })

    i don't know why it can't jump to next input filed when I input numeric in num pad from above javascript.

    Thursday, September 24, 2020 10:15 AM

All replies

  • User-1330468790 posted

    Hi 20141113,

     

    Sorry that the last reply confuses you. 

    The reason is that the input value for number keys in num pad is different from those under the function keys.

    The values for keys in Number row:  48 ~ 57

    The values for keys in Number Pad:  96 ~ 105

     

    That's the reason why I use these "magic" numbers on the sides of the comparison operators. 

    To make the codes more readable, I modified the previous codes for your reference.

     <div>
                <div class="container body-content">
                    <h3>Please enter the 6-digit verification code we sent via SMS:</h3>
                    <div>
                        <div id="SMSArea" class="row SMSArea">
                            <div class="col-2">
                                <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
                            </div>
                            <div class="col-2">
                                <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
                            </div>
                            <div class="col-2">
                                <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
                            </div>
                            <div class="col-2">
                                <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
                            </div>
                            <div class="col-2">
                                <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
                            </div>
                            <div class="col-2">
                                <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
                            </div>
                            
                           
    
    
                        </div>
                        <div class="row ">
                            <button id="verifyBtn" class="btn btn-primary btn-embossed" >Verify</button>
                            <label id="LabelSMCCodes"></label>
                            <input id="hf_sms" type="hidden" />
                        </div>
    
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(function () {
                    var smsCodes = $('.smsCode');
                    function goToNextInput(e) {
                        var key = e.which,
                            t = $(e.target),
                            // Get the next input
                            sib = t.closest('div').next().find('.smsCode');
    
                        // Not allow any keys to work except for tab and number
                        if ( !IsTab(key) && !IsNum(key)) {
                            console.log("!=9");
                            e.preventDefault();
                            return false;
                        }
    
                        // Tab
                        if (IsTab(key)) {
                            console.log("===9");
                            return true;
                        }
    
                        // Go back to the first one
                        if (!sib || !sib.length) {
                            console.log("!sib || !sib.length");
                            
                            sib = $('.smsCode').eq(0);
                            console.log(sib);
                        }
                        sib.select().focus();
                    }
    
                    function onKeyDown(e) {
                        var key = e.which;
    
                        // only allow tab and number
                        if (IsTab(key) || IsNum(key)) {
                            return true;
                        }
    
                        e.preventDefault();
                        return false;
                    }
    
                    function onFocus(e) {
                        $(e.target).select();
                    }
    
                    function IsTab(key) {
                        return key === 9;
                    }
    
                    function IsNum(key) {
                        // Number range 48~57 means values for the number key row, Number range 97~105
                        return (key >= 48 && key <= 57) || (key >= 96 && key <= 105);
                    }
    
                    smsCodes.on('keyup', goToNextInput);
                    smsCodes.on('keydown', onKeyDown);
                    smsCodes.on('click', onFocus);
    
    
    
                })
            </script>
            <script>
                $(function () {
                    $("#verifyBtn").on('click', function (e) {
                        console.log('btnclick');
                        combineSMSCodes();
                        e.preventDefault();
                    });
    
                })
    
                function combineSMSCodes() {
                    var sms = "";
                    $('.smsCode').each(function(i,element){
                        sms += $(element).val();
                    })
    
                    // use label to display
                    $("#LabelSMCCodes").text("The SMS Codes are: " + sms);
                    // use hidden field to store the sms codes
                    $("#hf_sms").val(sms);
                }
            </script>

     

    Hope this can help you.

    Best regards,

    Sean

    Friday, September 25, 2020 6:40 AM
  • User-583959464 posted

    Sean Fang

    Hi 20141113,

     

    Sorry that the last reply confuses you. 

    The reason is that the input value for number keys in num pad is different from those under the function keys.

    The values for keys in Number row:  48 ~ 57

    The values for keys in Number Pad:  96 ~ 105

     

    That's the reason why I use these "magic" numbers on the sides of the comparison operators. 

    To make the codes more readable, I modified the previous codes for your reference.

     <div>
                <div class="container body-content">
                    <h3>Please enter the 6-digit verification code we sent via SMS:</h3>
                    <div>
                        <div id="SMSArea" class="row SMSArea">
                            <div class="col-2">
                                <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
                            </div>
                            <div class="col-2">
                                <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
                            </div>
                            <div class="col-2">
                                <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
                            </div>
                            <div class="col-2">
                                <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
                            </div>
                            <div class="col-2">
                                <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
                            </div>
                            <div class="col-2">
                                <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
                            </div>
                            
                           
    
    
                        </div>
                        <div class="row ">
                            <button id="verifyBtn" class="btn btn-primary btn-embossed" >Verify</button>
                            <label id="LabelSMCCodes"></label>
                            <input id="hf_sms" type="hidden" />
                        </div>
    
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(function () {
                    var smsCodes = $('.smsCode');
                    function goToNextInput(e) {
                        var key = e.which,
                            t = $(e.target),
                            // Get the next input
                            sib = t.closest('div').next().find('.smsCode');
    
                        // Not allow any keys to work except for tab and number
                        if ( !IsTab(key) && !IsNum(key)) {
                            console.log("!=9");
                            e.preventDefault();
                            return false;
                        }
    
                        // Tab
                        if (IsTab(key)) {
                            console.log("===9");
                            return true;
                        }
    
                        // Go back to the first one
                        if (!sib || !sib.length) {
                            console.log("!sib || !sib.length");
                            
                            sib = $('.smsCode').eq(0);
                            console.log(sib);
                        }
                        sib.select().focus();
                    }
    
                    function onKeyDown(e) {
                        var key = e.which;
    
                        // only allow tab and number
                        if (IsTab(key) || IsNum(key)) {
                            return true;
                        }
    
                        e.preventDefault();
                        return false;
                    }
    
                    function onFocus(e) {
                        $(e.target).select();
                    }
    
                    function IsTab(key) {
                        return key === 9;
                    }
    
                    function IsNum(key) {
                        // Number range 48~57 means values for the number key row, Number range 97~105
                        return (key >= 48 && key <= 57) || (key >= 96 && key <= 105);
                    }
    
                    smsCodes.on('keyup', goToNextInput);
                    smsCodes.on('keydown', onKeyDown);
                    smsCodes.on('click', onFocus);
    
    
    
                })
            </script>
            <script>
                $(function () {
                    $("#verifyBtn").on('click', function (e) {
                        console.log('btnclick');
                        combineSMSCodes();
                        e.preventDefault();
                    });
    
                })
    
                function combineSMSCodes() {
                    var sms = "";
                    $('.smsCode').each(function(i,element){
                        sms += $(element).val();
                    })
    
                    // use label to display
                    $("#LabelSMCCodes").text("The SMS Codes are: " + sms);
                    // use hidden field to store the sms codes
                    $("#hf_sms").val(sms);
                }
            </script>

     

    Hope this can help you.

    Best regards,

    Sean

    when the textbox is empty, how to jump previous textbox after pressing backspace button. (press backspace to remove numeric in current textbox and auto go to previous textbox for 6 sms input textbox.

    Friday, September 25, 2020 7:00 AM
  • User-1330468790 posted

    Hi 20141113,

     

    Regarding the backspace key, it is another topic since you cannot simply change the value but need to add new codes to find the previous input textbox.

    We suggest that you could post a new thread for the new topic/problem so that we could focus on solving one problem at the same time.

     

    Moreover, since you already mentioned this question in previous thread, I have replied you there : https://forums.asp.net/t/2170688.aspx

     

    Best regards,

    Sean

    Friday, September 25, 2020 8:00 AM