iPhone将只关注一个html输入文本的两个屏幕上?

Question

所以我在React应用程序中有两个输入文本框。我可以在其中一个输入输入，但它拒绝关注另一个。如果我将焦点放在文本框外并单击另一个文本框，它会重新聚焦在第一个文本框上。如果我重新加载页面并首先在第二个文本框中输入，则它拒绝关注第一个文本框。

我试过了"-webkit-user-select: text;"我在类似的帮助问题中找到的方法，但无济于事。此问题仅发生在iOS设备上。

这是我的SCSS -

.formField {
input {
border: 1px solid var(--line-color);
width: 380px;
height: 45px;
background-color: var(--background-color1);
padding: 10px;
font-size: 19px;
font-family: var(--font-family-semibold);
color: var(--text-color);
box-sizing: border-box;
&::placeholder {
font-size: 19px;
color: var(--placeholder-color);
font-family: var(--font-family-semibold);
}
&:focus {
padding: 9px;
outline: var(--onfocus-outline);
border: var(--onfocus-border);
border-radius: var(--onfocus-border-radius);
}
@include for-phone-portrait {
width: 310px;
height: 40px;
}}}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

如何出现更好看的一个

Answer 1

实际上与SCSS无关。我们使用以下方法为带有货币掩码的角色设置正确的位置，并且它同时在onChange和onBlur上发射。阻止它发射onBlur已删除此问题。

if (!isBlur) setTimeout(() => { inputElement.setSelectionRange(caretPos,
caretPos); },