时间戳

首页 > 解决方案 > iPhone将只关注屏幕上两个的一个html输入文本？

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

问题描述

所以我在 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;
}

它看起来如何 更好看

标签： htmliosreactjsinputsass

解决方案

实际上与SCSS无关。我们正在使用以下方法为带有货币掩码的字符设置正确的位置，并且它同时在onChange和上触发onBlur。阻止它发射onBlur消除了这个问题。

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

推荐阅读