locked
how to format textbox to input 1 digit only for width and input control (for 6 digits sms random input for 6 textbox) RRS feed

  • Question

  • User-583959464 posted

    i need to create a SMS OTP 6 digits input textbox. but i need to spearate 6 textbox and each textbox can only allow to input 1 digit max. , and all the textbox with all round corners. and it will place in line.

    i would like to have following format for 6 textbox.

    1. the textbox only allow user to input 1 digit.
    2. set the width same as 1 digit 
    3. textbox with 4 round corner.
    4. place 6 textbox in line with equal distance (how to set the distance between each textbox?)

    any sample coding for reference for the above format?

    photosample

    i am trying to insert textbox sample but failed to upload in this forum, how to insert photo in this post?

    ------------------------------------------------------------------------------------------

    my coding

    <p>Rounded corners with background color:</p>
    <input type="text" size="1" maxlength="1" border-radius: 15px;  id="ip1"/>
    <input type="text" size="1" width="2px" border-radius: 15px; maxlength="1" id="ip1"/>

    ---------------------------------------------------------------------------------------------------------------

    Monday, September 14, 2020 11:11 AM

All replies

  • User-583959464 posted

    i need to create a SMS OTP 6 digits input textbox. but i need to spearate 6 textbox and each textbox can only allow to input 1 digit max. , and all the textbox with all round corners. and it will place in line.

    i would like to have following format for 6 textbox.

    1. the textbox only allow user to input 1 digit.
    2. set the width same as 1 digit 
    3. textbox with 4 round corner.
    4. place 6 textbox in line with equal distance (how to set the distance between each textbox?)

    any sample coding for reference for the above format?

    photosample

    i am trying to insert textbox sample but failed to upload in this forum, how to insert photo in this post?

    ------------------------------------------------------------------------------------------

    my coding

    <p>Rounded corners with background color:</p>
    <input type="text" size="1" maxlength="1" border-radius: 15px;  id="ip1"/>
    <input type="text" size="1" width="2px" border-radius: 15px; maxlength="1" id="ip1"/>

    ---------------------------------------------------------------------------------------------------------------

    anyone knows?

    Monday, September 14, 2020 4:47 PM
  • User-1330468790 posted

    Hi 20141113,

     

    If you really want to have a complicated visual effect, I suggest you consider Bootstrap classes.

     

    For your questions,

    • the textbox only allow user to input 1 digit: 
    • set the width same as 1 digit 

    You could use below codes for above features

    maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
    • textbox with 4 round corner.

    The bootstrap already provide classes so that you don't need to write them by yourself. Refer to this link: Border-radius

    • place 6 textbox in line with equal distance (how to set the distance between each textbox?

    Another useful thing is the grid system with classes "row" and "col" in bootstrap. You could refer to this link:  Grid system

     

    Based on your description, I constructed a demo for your reference.

    <head runat="server">
        <title></title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="v4.4.1 bootstrapCSS Cdn" />
    
        <!-- jQuery library -->
        <script src="3.4.1 jquery js cdn></script>
    
        <!-- Popper JS -->
       
    
        <!-- Latest compiled JavaScript -->
        <script src="4.4.1 bootstrap js cdn"></script>
        <style>
            .smsCode {
                text-align: center;
                line-height: 80px;
                font-size: 50px;
                border: solid 1px #ccc;
                box-shadow: 0 0 5px #ccc inset;
                width:100%;
                outline: none;
                border-radius: 3px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <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 class="btn btn-primary btn-embossed">Verify</button>
                        </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 (key != 9 && (key < 48 || key > 57)) {
                            console.log("!=9");
                            e.preventDefault();
                            return false;
                        }
    
                        // Tab
                        if (key === 9) {
                            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 (key === 9 || (key >= 48 && key <= 57)) {
                            return true;
                        }
    
                        e.preventDefault();
                        return false;
                    }
    
                    function onFocus(e) {
                        $(e.target).select();
                    }
    
                    smsCodes.on('keyup', goToNextInput);
                    smsCodes.on('keydown', onKeyDown);
                    smsCodes.on('click', onFocus);
    
                })
            </script>
        </form>
    </body>

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    Tuesday, September 15, 2020 3:54 AM
  • User-1151440187 posted

    You can add only one digit using maxlength property of input tag.

    I did the code refer this link : https://jsfiddle.net/p2dho58k/

    Hope you understand it.

    Thanks!

    Tuesday, September 15, 2020 4:09 AM
  • User-583959464 posted

    thanks  , it is exact what I want to do. one more question,  I have six text boxs for SMS now, how can I combine 6 text box valve from javascript into hidden textbox id="hiddensms" when submit form.

    Wednesday, September 16, 2020 7:10 AM
  • User-1330468790 posted

    Hi 20141113, 

     

    It depends on what kind of format you want to use. 

    From my understanding, you could concatenate the numbers into one string.

    For example, 1,2,3,4,5,6, then result is "123456".

    add html:

     <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>

    add 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);
                }

    Demo:

     

    Best regards,

    Sean

    Wednesday, September 16, 2020 8:00 AM
  • User-583959464 posted

    it is exactly what I want, but how to automatically focus to go to next textbox once input the 1 digit.?

    Friday, September 18, 2020 2:42 AM
  • User-1330468790 posted

    Hi 20141113,

     

    You should focus on the javascript functions I provided you with.

    There is a function called "goToNextInput(e)" which will check the input value whenever you typed a value for the event "keyup".

    If the key is pressed and it represents 'Tab' or any number values, the value will be set in the textbox. Otherwise, the operation will be ignored.

     

    Feel free to let me know if you do have any question.

     

    Best regards,

    Sean

    Monday, September 21, 2020 2:14 AM
  • User-583959464 posted

    I can't defined class attribute for textbox, only style attribute set for formatting textbox as below. but finally try the gotonext inputbox failed. 

    how to fix it so that go to next can work properly.

    <text style="smscodes" id="sms1" size="1" maxlength="1"/>

    <text style ="smscodes" id="sms2" size="1" maxlength ="1"/>

    and set for ID for textbox for  sms1 to sms6 respectively.

    how cant I find next input textbox by style instead of class attribute 

    Tuesday, September 22, 2020 7:59 AM
  • User-583959464 posted

    how can I set allow number, backspace, delete, left, right arrow key for 6 sms textboxes?

    it seems I cannot input by keyboard calculator key on right hand side of the keyboard,  how can I input all numeric in keyboard 

    Thursday, September 24, 2020 2:06 AM
  • User-583959464 posted

    Hi 20141113,

     

    If you really want to have a complicated visual effect, I suggest you consider Bootstrap classes.

     

    For your questions,

    • the textbox only allow user to input 1 digit: 
    • set the width same as 1 digit 

    You could use below codes for above features

    maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
    • textbox with 4 round corner.

    The bootstrap already provide classes so that you don't need to write them by yourself. Refer to this link: Border-radius

    • place 6 textbox in line with equal distance (how to set the distance between each textbox?

    Another useful thing is the grid system with classes "row" and "col" in bootstrap. You could refer to this link:  Grid system

     

    Based on your description, I constructed a demo for your reference.

    <head runat="server">
        <title></title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="v4.4.1 bootstrapCSS Cdn" />
    
        <!-- jQuery library -->
        <script src="3.4.1 jquery js cdn></script>
    
        <!-- Popper JS -->
       
    
        <!-- Latest compiled JavaScript -->
        <script src="4.4.1 bootstrap js cdn"></script>
        <style>
            .smsCode {
                text-align: center;
                line-height: 80px;
                font-size: 50px;
                border: solid 1px #ccc;
                box-shadow: 0 0 5px #ccc inset;
                width:100%;
                outline: none;
                border-radius: 3px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <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 class="btn btn-primary btn-embossed">Verify</button>
                        </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 (key != 9 && (key < 48 || key > 57)) {
                            console.log("!=9");
                            e.preventDefault();
                            return false;
                        }
    
                        // Tab
                        if (key === 9) {
                            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 (key === 9 || (key >= 48 && key <= 57)) {
                            return true;
                        }
    
                        e.preventDefault();
                        return false;
                    }
    
                    function onFocus(e) {
                        $(e.target).select();
                    }
    
                    smsCodes.on('keyup', goToNextInput);
                    smsCodes.on('keydown', onKeyDown);
                    smsCodes.on('click', onFocus);
    
                })
            </script>
        </form>
    </body>

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    i have amended to allow backspace or delete button press, but how can i go to previous textbox after click the backspace button.

    Friday, September 25, 2020 4:34 AM
  • User-1330468790 posted

    Hi 20141113,

     

    i have amended to allow backspace or delete button press, but how can i go to previous textbox after click the backspace button.

    You could add some codes to change the next sib to the previous input textbox.

     

    More details, please refer to below codes:

     <form id="form1" runat="server">
            <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 id="sms1" 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 id="sms2" 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 id="sms3" 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 id="sms4" 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 id="sms5" 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 id="sms6" 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 = $('input[id*=sms]');
                    function goToNextInput(e) {
                        var key = e.which,
                            t = $(e.target),
                            // Get the next input
                            sib = t.closest('div').next().find('input[id*=sms]'),
                            // Get the previous input
                            prev = t.closest('div').prev().find('input[id*=sms]');
    
                        // Not allow any keys to work except for tab , numbers and backspace
                        if (!IsTab(key) && !IsNum(key) && !IsBackSpace(key)) {
                            
                            e.preventDefault();
                            return false;
                        }
    
    
                        // Tab
                        if (IsTab(key)) {
                            
                            return true;
                        }
    
                        // Go back to the first one
                        if (!sib || !sib.length) {
                             sib = smsCodes.eq(0);
                        }
    
                        // Set the sib to the previous input so  that it is able to go back to previous input textbox
                        if (IsBackSpace(key)) {
                            sib = prev;
                        }
    
                        sib.select().focus();
                    }
    
    
                    function onKeyDown(e) {
                        var key = e.which;
    
                        // only allow tab, number and backspace
                        if (IsTab(key) || IsNum(key) || IsBackSpace(key)) {
                            return true;
                        }
    
                        e.preventDefault();
                        return false;
                    }
    
                    function onFocus(e) {
                        $(e.target).select();
                    }
    
                    function IsTab(key) {
                        return key === 9;
                    }
    
                    function IsBackSpace(key) {
                        return key === 8;
                    }
    
                    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>
           
        </form>

     

    Regarding the values for keys on the keyboard, you might be interested in below links:

    Virtual-Key Codes (In based 64, AFAK hexadecimal)

    Key Values - Web APIs | MDN

    Another interesting resources that you could use as a test tool to determine what the value is for a specific key.

    JavaScript Event KeyCodes

     

    Hope this make the topic clear for you.

    Best regards,

    Sean

    Friday, September 25, 2020 7:50 AM