Question

我现在才注意到这一点，但是由于某种原因，我似乎无法在使用React和NextJS构建的页面中键入某些输入字段。这仅发生在移动设备上，而在桌面设备上，表单运行正常。

但是，这就是奇怪的地方。我可以很好地输入密码，这只会在其他输入类型（例如type="text"和type="email"）上发生。

仍然可以使用键盘预测功能在文本框中键入内容，但不能使用普通键盘。

这是我的表格：

function LoginForm(props) {
  return (
    <form onSubmit={props.submitLogin} className={"flex flex-col self-center justify-between w-full"}>
      <div className={"text-xl text-center mb-4"}>Sign In</div>
      <div className={"text-gray-600 text-xs pl-2"}>Username:</div>
      <input
        value={props.formData.username}
        name="username"
        type="text"
        onChange={props.updateField}
        className={"form__username my-1 p-2 rounded border-gray-300 border border-solid"}
      />
      <div className={"text-gray-600 text-xs pl-2"}>Password:</div>
      <input
        value={props.formData.password}
        name="password"
        type="password"
        onChange={props.updateField}
        className={"form__password my-1 p-2 rounded border-gray-300 border border-solid"}
      />
      <button
        className={"bg-blue-500 hover:bg-blue-400 focus:bg-blue-600 focus:shadow-outline p-2 mt-4 rounded border-blue-500 uppercase font-semibold text-gray-100 border border-solid"}
      >Login</button>

      <div className={"p-2 text-center"} dangerouslySetInnerHTML={createMarkup(props.formMessage)}>
      </div>

    </form>
  )
}

包含的组件：

export function LoginModal(p) {
  const [showLogin, toggleLogin] = useState(p.showLogin)

  useEffect(() => {
    toggleLogin(p.showLogin);
  }, [p]);

  const sendSignupForm = e => {
    e.preventDefault();
    if ( Object.values(form).some(empty) ) {
      props.setMessage("Please fill all the fields.")
    } else {
      props.setSignupData(form)
    }
  };

  const [form, setValues] = useState({
    username: '',
    password: '',
    checked: false,
    email: ''
  });

  const [message, setMessage] = useState('')

  const updateField = e => {
    setValues({
      ...form,
      [e.target.name]: e.target.type === 'checkbox' ? e.target.checked : e.target.value
    });
  };

  const spring = useSpring({
    from: { opacity: 0 },
    to: { opacity: !p.state ? 1 : 0 }
  });

  const transitions = useTransition(!p.state, null, {
    from: { transform: `scale(1.5)`, opacity: 0 },
    enter: { transform: `scale(1)`, opacity: 1 },
    leave: { transform: `scale(1.5)`, opacity: 0 },
    unique: true
  });

  const submitLogin = async(e) => {
    e.preventDefault();
    await
      login(form).then(data => {
        if(data.message) {
          setMessage(data.message)
        } else{
          p.setData(data.user)
        }
      })
  }

  const submitSignup = async(e) => {
    e.preventDefault();
    if(form.checked){
      await
        register(form).then(data => {
          console.log(data)
          if(data.message) {
            setMessage(data.message)
            console.log(message)
          } else{
            p.setData(data.user)
          }
        })
    } else {
        setMessage("Please accept our privacy policy.")
    }
  }

  return (
    <Fragment>
      <animated.div style={spring} />
        {transitions.map(({ item, key, props }) =>
          item ? (
            <div key={key} className={"z-10 flex absolute w-screen h-screen top-0 left-0"}>

              <animated.div
                className={`popup md:max-w-4xl md:h-2/4 xs:w-full justify-center flex lg:flex-row xs:flex-col fixed rounded left-0 right-0 mx-auto self-center -mt-3 sm:mt-0`}
                style={ props }
                >

                <button className={"absolute right-0 p-4 xs:top-0"} onClick={() => p.onClick(false)}><Close/></button>

                <div className={"hidden bg-gray-900 rounded rounded-r-none w-2/4 lg:flex items-center justify-center "}>
                  <div className="text-gray-100 header__logo--white self-centertext-6xl xs:mx-auto sm:mx-0">
                    <Logo/>
                  </div>
                </div>

                <div className={"popup__forms flex flex-col xs:mx-auto xs:w-full justify-center popup__form rounded rounded-l-none lg:w-2/4 p-5"}>
                  { showLogin ? (
                      <LoginForm submitLogin={submitLogin} updateField={updateField} formMessage={message} formData={form}/>
                    ) : (
                      <SignUpForm submitSignup={submitSignup} updateField={updateField} formMessage={message} formData={form}/>
                    )
                  }

                  { showLogin ? (
                      <div className="my-4 text-center">Not a member? <a onClick={() => toggleLogin(false)} className={"cursor-pointer text-blue-500 hover:text-blue-400 underline"}>Sign Up</a></div>
                    ) : (
                      <div className="my-4 text-center">Already a member? <a onClick={() => toggleLogin(true)} className={"cursor-pointer text-blue-500 hover:text-blue-400 underline"}>Login</a></div>
                    )
                  }
                </div>

              </animated.div>

              <animated.div
                className={`popup-background fixed top-0 left-0 w-full items-center justify-center h-screen`}
                onClick={() => p.toggle(!p.state)}
                style={props}>
              </animated.div>

            </div>

          ) : null
        )
      }
    </Fragment>
  )
}

所有这些都通过相同的功能更新：

const updateField = e => {
    setValues({
      ...form,
      [e.target.name]: e.target.type === 'checkbox' ? e.target.checked : e.target.value
    });
  };

  const [form, setValues] = useState({
    username: '',
    password: '',
    email: ''
  });

Live example，单击“注册”或“登录”，然后尝试输入值。

我很迷茫，这是什么原因造成的？

我看过this，this和this，但它们似乎与我的问题无关。

Answer 1

发生这种情况是因为我的输入之一具有以下CSS规则：

.form__username {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

一旦我将其删除，它就会开始正常工作。

反应：无法在手机上输入某些输入字段

1 个答案: