iphone 当点击一个表单时自动聚焦到点击的地方

Question

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

自动对焦正常。我通过刷新视频末尾显示的页面对其进行了测试。

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

按钮：

              <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')}
        />

Answer 1

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

<TextField ref="firstname" />

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

this.refs.firstname.focus()

名字字段将成为焦点

Answer 2

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

iphone 当点击一个表单时自动聚焦到点击的地方

iphone when click to a form auto focus to the clicking place

iphone

autofocus

single-page-application

reactjs