iphone点击表单时自动聚焦到点击的地方答案

【问题标题】：iphone when click to a form auto focus to the clicking placeiphone点击表单时自动聚焦到点击的地方
【发布时间】：2018-04-23 00:45:28
【问题描述】：

对不起，标题不是那么描述性的。但图像应该解释我所看到的。基本上，当用户单击一个按钮时，它应该将他/她重定向到该表单并自动聚焦到第一个字段。

自动对焦正在工作。我通过刷新显示在视频末尾的页面来测试它。

问题是转到第一个字段，它似乎总是自动聚焦到单击按钮的字段。这只发生在手机上。手机似乎在告诉它自动聚焦我之前的触摸位置。

按钮：

              <FlatButton
                label="Sign Up"
                className="e2e-login-page-sign-up linkButton"
                style={(Buttons.linkButton, {float: 'left'})}
                labelStyle={Buttons.buttonLabelLink}
                onTouchTap={() => navigateTo('/sign-up')}
              />

然后是表格：

<TextField
          className="requiredField"
          value={this.state.confirmPassword}
          type="password"
          fullWidth={true}
          floatingLabelText="Confirm Password"
          errorText={getConfirmPasswordErrorMessage(
            this.state.password,
            this.state.confirmPassword
          )}
          errorStyle={{textAlign: 'left'}}
          underlineFocusStyle={Styles.underlineFocusStyle}
          floatingLabelStyle={Styles.floatingLabelStyle}
          floatingLabelFocusStyle={Styles.floatingLabelFocusStyle}
          onChange={(_event, value) =>
            this._handleChange(value, 'confirmPassword')}
        />

【问题讨论】：

你能包含一些代码吗？如果不查看代码，我们将无法真正帮助您。 stackoverflow.com/help/mcve

标签： iphone reactjs single-page-application autofocus

【解决方案1】：

onTouchTap 是问题所在。一旦转向 React 16，它将失去支持。将其更改为 onClick 后，它就可以工作了。

【讨论】：

【解决方案2】：

尝试将此代码添加到您的名字<TextField />

<TextField ref="firstname" />

然后您应该能够通过将此行添加到您的注册按钮单击处理程序来强制关注该文本字段

this.refs.firstname.focus()

名字字段将被聚焦

【讨论】：

不起作用。它仍然有同样的问题。谢谢