An OTP enter kind was created utilizing HTML/CSS/JS, which incorporates six enter fields. It capabilities as anticipated, however when examined on iOS units, it was noticed that the web page routinely facilities across the enter discipline that’s in focus. This isn’t the specified conduct, and there’s a must disable this computerized centering for enter fields. Is there a method to obtain this on iOS?
css code under:
#inputContainer{
padding:0px;
show: flex;
font-size:28px;
margin:auto;
width: 216px;
peak: 44;
}
#inputContainer enter{
margin: 0px 2px 0px 2px;
show: inline-flex;
border: 1px stable rgba(156, 150, 127, 0.24);
width: 32px;
peak: 44px;
border-radius: 8px;
text-align: middle;
font-size:28px;
caret-color: clear;
}
#inputContainer enter:nth-child(1){
border: 1px stable rgba(255, 212, 3, 1);
}
#inputContainer enter:focus {
define: none;
}
#inputContainer enter[disabled] {
colour: black;
}
js code under:
const inactiveInputBorderColor = "1px stable rgba(156, 150, 127, 0.24)";
const activeInputBorderColor = "2px stable rgba(255, 212, 3, 1)";
const hoverInputBorderColor = "1px stable rgba(255, 212, 3, 1)";
const inactiveBoxShadow = "none";
const activeBoxShadow = "0 0 0 3px rgba(255, 154, 3, 0.15)";
const inputs = doc.querySelectorAll("#inputContainer enter");
inputs.forEach((enter, index) => {
enter.dataset.index = index;
enter.addEventListener("click on", customClickInput);
enter.addEventListener("paste", customPastOtp);
enter.addEventListener("mouseenter", customEnterHover);
enter.addEventListener("mouseleave", customLeaveHover);
enter.addEventListener("keyup", customEnterAndRemoveOtp);
});
operate submitOtp(){
let otp = "";
setTimeout(operate() {
inputs.forEach((enter) => {
otp += enter.worth;
enter.disabled = true;
enter.classList.add("disabled");
});
}, 5000);
}
operate customPastOtp(e){
const information = e.clipboardData.getData("textual content");
const worth = information.break up("");
if(worth.size === inputs.size){
inputs.forEach((enter, index) => {
enter.disabled = true;
enter.worth = worth[index];
enter.fashion.border = inactiveInputBorderColor;
enter.fashion.boxShadow = inactiveBoxShadow;
});
submitOtp();
} else if(worth.size < inputs.size) {
inputs.forEach((enter, index) => {
if(index < worth.size){
enter.disabled = true;
enter.worth = worth[index];
enter.fashion.border = inactiveInputBorderColor;
enter.fashion.boxShadow = inactiveBoxShadow;
} else if(index === worth.size){
console.log(index);
enter.fashion.boxShadow = activeBoxShadow;
enter.fashion.border = activeInputBorderColor;
enter.focus();
}
});
submitOtp();
}
e.preventDefault();
};
operate customEnterAndRemoveOtp(e){
const enter = e.goal;
let worth = enter.worth;
if(worth.size === inputs.size){
inputs.forEach((enter, index) => {enter.worth = worth[index];});
submitOtp();
}else if( 1 < worth.size && worth.size < inputs.size){
inputs.forEach((enter, index) => {
if(index < worth.size){
enter.disabled = true;
enter.worth = worth[index];
enter.fashion.border = inactiveInputBorderColor;
enter.fashion.boxShadow = inactiveBoxShadow;
} else if(index === worth.size){
console.log(index);
enter.fashion.boxShadow = activeBoxShadow;
enter.fashion.border = activeInputBorderColor;
enter.focus();
}
});
}else{
enter.worth = "";
enter.worth = worth ? worth[0] : "";
let fieldIndex = enter.dataset.index;
if(worth.size > 0 && fieldIndex < inputs.size - 1){
enter.fashion.border = inactiveInputBorderColor;
enter.fashion.boxShadow = inactiveBoxShadow;
enter.disabled = true;
enter.nextElementSibling.fashion.boxShadow = activeBoxShadow;
enter.nextElementSibling.fashion.border = activeInputBorderColor;
enter.nextElementSibling.focus();
}else if(worth.size > 0 && fieldIndex == inputs.size - 1){
enter.fashion.border = inactiveInputBorderColor;
enter.fashion.boxShadow = inactiveBoxShadow;
submitOtp();
}
if (e.key === "Backspace" && fieldIndex > 0){
enter.fashion.border = inactiveInputBorderColor;
enter.fashion.boxShadow = inactiveBoxShadow;
enter.previousElementSibling.disabled = false;
enter.previousElementSibling.fashion.boxShadow = activeBoxShadow;
enter.previousElementSibling.fashion.border = activeInputBorderColor;
enter.previousElementSibling.worth = "";
enter.previousElementSibling.focus();
} else if(e.key === "Delete" && fieldIndex > 0){
enter.fashion.border = inactiveInputBorderColor;
enter.fashion.boxShadow = inactiveBoxShadow;
enter.previousElementSibling.disabled = false;
enter.previousElementSibling.fashion.boxShadow = activeBoxShadow;
enter.previousElementSibling.fashion.border = activeInputBorderColor;
enter.previousElementSibling.worth = "";
enter.previousElementSibling.focus();
}
}
}
operate customClickInput(e){
let valueFlag = 0;
inputs.forEach((enter) => {
if(valueFlag === 0 && enter.worth == ""){
enter.removeEventListener("mouseenter", customEnterHover);
enter.removeEventListener("mouseleave", customLeaveHover);
enter.fashion.border = activeInputBorderColor;
enter.fashion.boxShadow = activeBoxShadow;
enter.focus();
valueFlag++;
}else{
enter.removeEventListener("mouseenter", customEnterHover);
enter.removeEventListener("mouseleave", customLeaveHover);
enter.fashion.border = inactiveInputBorderColor;
enter.fashion.boxShadow = inactiveBoxShadow;
}
});
}
operate customEnterHover(e){
const enter = e.goal;
let fieldIndex = enter.dataset.index;
inputs.forEach((enter) => {
if(enter.dataset.index === fieldIndex){
enter.fashion.border = hoverInputBorderColor;
enter.fashion.boxShadow = inactiveBoxShadow;
}else{
enter.fashion.border = inactiveInputBorderColor;
enter.fashion.boxShadow = inactiveBoxShadow;
}
});
}
operate customLeaveHover(e){
const enter = e.goal;
let fieldIndex = enter.dataset.index;
inputs.forEach((enter) => {
enter.fashion.border = inactiveInputBorderColor;
enter.fashion.boxShadow = inactiveBoxShadow;
});
}
window.onload = operate() {
doc.querySelector("#inputContainer enter:nth-child(1)").focus();
console.log("centered");
};
html code under:
<physique>
<div id="inputContainer">
<enter kind="textual content" sample="[0-9]*" inputmode="numeric" maxlength="6" autocomplete="off">
<enter kind="textual content" sample="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
<enter kind="textual content" sample="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
<enter kind="textual content" sample="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
<enter kind="textual content" sample="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
<enter kind="textual content" sample="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
</div>
</physique>
