Как показать цифровую клавиатуру при загрузке веб-страницы в ios/safari? ⇐ CSS

[Anonymous]

Работая над веб-сайтом, я заметил, что виртуальная клавиатура не отображается, когда поле ввода на странице получает фокус во время процесса загрузки страницы. Я знаю, что из-за ограничений политики Apple данный функционал не может быть реализован, поскольку они запрещают подобные действия. Однако мне любопытно, есть ли обходной путь или способ обойти это ограничение. Не могли бы вы дать какие-либо идеи или предложения?
ОБНОВЛЕНИЕ
Основная проблема заключается в том, что после загрузки страницы цифровая клавиатура не отображается на iPhone в браузере Safari. Клиенту необходимо нажать на поле ввода, чтобы появилась клавиатура. На устройствах Android клавиатура отображается без дополнительных действий со стороны клиента.
css-код ниже:
#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-код ниже:
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-код ниже:












Подробнее здесь: https://stackoverflow.com/questions/784 ... ios-safari