如何在ios/safari加载网页时显示数字键盘？

Question

在开发网站时，我发现当页面上的输入字段在页面加载过程中获得焦点时，虚拟键盘无法显示。我知道，由于 Apple 的政策限制，此功能无法实现，因为他们禁止此类操作。但是，我很好奇是否有解决方法或方法可以克服此限制。您能为下面的代码提供任何见解或建议吗？

<div id="inputContainer">
    <input type="text" pattern="[0-9]*" inputmode="numeric" maxlength="6" autocomplete="off" autofocus>
    <input type="text" pattern="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
    <input type="text" pattern="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
    <input type="text" pattern="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
    <input type="text" pattern="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
    <input type="text" pattern="[0-9]*" inputmode="numeric" maxlength="1" autocomplete="off">
</div>

Answer 1

如果您使用的是 React js，您可以使用 useRef 来获取 elemenet 值的引用 使用下面的代码来集中您的输入

  const myRef = useRef(null);
  
  useEffect(()=>{
  inputRef.current?.focus();
  },[])

  // refrence your element with ref
  <input ref={inputRef} type="text" />