An OTP input form was created using HTML/CSS/JS, which includes six input fields. It functions as expected, but when tested on iOS devices, it was observed that the page automatically centers around the input field that is in focus. This isn’t the desired behavior, and there’s a need to disable this automatic centering for input fields. Is there a way to achieve this on iOS?

css code below:

    #inputContainer{
        padding:0px;
        display: flex;
        font-size:28px;
        margin:auto;
        width: 216px; 
        height: 44;
    }
    
    #inputContainer input{
        margin: 0px 2px 0px 2px;
        display: inline-flex;
        border: 1px solid rgba(156, 150, 127, 0.24);
        width: 32px;
        height: 44px;
        border-radius: 8px;
        text-align: center;
        font-size:28px;
        caret-color: transparent;
    }
    
    #inputContainer input:nth-child(1){
        border: 1px solid rgba(255, 212, 3, 1);
    }
    
    #inputContainer input:focus { 
        outline: none;
    }
    
    #inputContainer input[disabled] { 
        color: black;
    }

js code below:

const inactiveInputBorderColor = "1px solid rgba(156, 150, 127, 0.24)";
            const activeInputBorderColor = "2px solid rgba(255, 212, 3, 1)";
            const hoverInputBorderColor = "1px solid rgba(255, 212, 3, 1)";
            const inactiveBoxShadow = "none";
            const activeBoxShadow = "0 0 0 3px rgba(255, 154, 3, 0.15)";
            const inputs = document.querySelectorAll("#inputContainer input");
            
                        
            inputs.forEach((input, index) => {
                input.dataset.index = index;

                input.addEventListener("click", customClickInput);
                input.addEventListener("paste", customPastOtp);
                input.addEventListener("mouseenter", customEnterHover);
                input.addEventListener("mouseleave", customLeaveHover);
                input.addEventListener("keyup", customEnterAndRemoveOtp);
            });
            
            function submitOtp(){
                let otp = "";
                
                setTimeout(function() {
                    inputs.forEach((input) => {
                        otp += input.value;
                        input.disabled = true;
                        input.classList.add("disabled");
                    });
                }, 5000);

            }
            
            function customPastOtp(e){
                const data = e.clipboardData.getData("text");
                const value = data.split("");
                if(value.length === inputs.length){
                                        
                    inputs.forEach((input, index) => {
                        input.disabled = true;
                        input.value = value[index];
                        input.style.border = inactiveInputBorderColor;
                        input.style.boxShadow = inactiveBoxShadow;
                    });
                    submitOtp();
                } else if(value.length < inputs.length) {
                    
                    inputs.forEach((input, index) => {
                        if(index  < value.length){
                            input.disabled = true;
                            input.value = value[index];
                            input.style.border = inactiveInputBorderColor;
                            input.style.boxShadow = inactiveBoxShadow;
                        } else if(index === value.length){
                            console.log(index);
                            input.style.boxShadow = activeBoxShadow;
                            input.style.border = activeInputBorderColor;
                            input.focus();
                        }
                    });
                    submitOtp();
                }
                e.preventDefault();
            };
            
            function customEnterAndRemoveOtp(e){
                const input = e.target;
                let value = input.value;
                
                if(value.length === inputs.length){
                    inputs.forEach((input, index) => {input.value = value[index];});
                    submitOtp();
                }else if( 1 < value.length && value.length < inputs.length){
                    inputs.forEach((input, index) => {
                        if(index  < value.length){
                            input.disabled = true;
                            input.value = value[index];
                            input.style.border = inactiveInputBorderColor;
                            input.style.boxShadow = inactiveBoxShadow;
                        } else if(index === value.length){
                            console.log(index);
                            input.style.boxShadow = activeBoxShadow;
                            input.style.border = activeInputBorderColor;
                            input.focus();
                        }
                    });
                }else{
                    input.value = "";
                    input.value = value ? value[0] : "";                    
                    let fieldIndex = input.dataset.index;
                    
                    if(value.length > 0 && fieldIndex < inputs.length - 1){
                        input.style.border = inactiveInputBorderColor;
                        input.style.boxShadow = inactiveBoxShadow;
                        input.disabled = true;
                        input.nextElementSibling.style.boxShadow = activeBoxShadow;
                        input.nextElementSibling.style.border = activeInputBorderColor;
                        input.nextElementSibling.focus();
                    }else if(value.length > 0 && fieldIndex == inputs.length - 1){
                        input.style.border = inactiveInputBorderColor;
                        input.style.boxShadow = inactiveBoxShadow;
                        submitOtp();
                    }   
                    
                    if (e.key === "Backspace" && fieldIndex > 0){
                        input.style.border = inactiveInputBorderColor;
                        input.style.boxShadow = inactiveBoxShadow;
                        input.previousElementSibling.disabled = false;
                        input.previousElementSibling.style.boxShadow = activeBoxShadow;
                        input.previousElementSibling.style.border = activeInputBorderColor;
                        input.previousElementSibling.value = "";
                        input.previousElementSibling.focus();
                    } else if(e.key === "Delete" && fieldIndex > 0){
                        input.style.border = inactiveInputBorderColor;
                        input.style.boxShadow = inactiveBoxShadow;
                        input.previousElementSibling.disabled = false;
                        input.previousElementSibling.style.boxShadow = activeBoxShadow;
                        input.previousElementSibling.style.border = activeInputBorderColor;
                        input.previousElementSibling.value = "";
                        input.previousElementSibling.focus();
                    }
                }
            }
            
            function customClickInput(e){
                let valueFlag = 0;
                
                inputs.forEach((input) => {
                    if(valueFlag === 0 && input.value == ""){
                        input.removeEventListener("mouseenter", customEnterHover);
                        input.removeEventListener("mouseleave", customLeaveHover);
                        input.style.border = activeInputBorderColor;
                        input.style.boxShadow = activeBoxShadow;
                        input.focus();
                        valueFlag++;
                    }else{
                        input.removeEventListener("mouseenter", customEnterHover);
                        input.removeEventListener("mouseleave", customLeaveHover);
                        input.style.border = inactiveInputBorderColor; 
                        input.style.boxShadow = inactiveBoxShadow;
                    }
                }); 
            }
            
            function customEnterHover(e){
                const input = e.target;
                let fieldIndex = input.dataset.index;
                
                inputs.forEach((input) => {
                    if(input.dataset.index === fieldIndex){
                        input.style.border = hoverInputBorderColor; 
                        input.style.boxShadow = inactiveBoxShadow;
                    }else{
                        input.style.border = inactiveInputBorderColor;
                        input.style.boxShadow = inactiveBoxShadow;
                    }
                });
            }
            
            function customLeaveHover(e){
                const input = e.target;
                let fieldIndex = input.dataset.index;
                
                inputs.forEach((input) => {
                    input.style.border = inactiveInputBorderColor;
                    input.style.boxShadow = inactiveBoxShadow;      
                });
            }
            
            window.onload = function() {
                document.querySelector("#inputContainer input:nth-child(1)").focus();
                console.log("focused");
            };

html code below:

<body>
    <div id="inputContainer">
        <input type="text" pattern="[0-9]*" inputmode="numeric" maxlength="6" autocomplete="off">
        <input type="text" pattern="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
        <input type="text" pattern="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
        <input type="text" pattern="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
        <input type="text" pattern="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
        <input type="text" pattern="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
    </div>
</body>