如何禁用FormControl对应的Chrome浏览器输入工具栏？

我有一个用于接收用户输入的简单FormControl元素，当前遇到的问题是：Chrome浏览器在用户点击该输入元素时会弹出键盘工具栏。

相关代码如下：

<Form onSubmit={submitInput}>
    <FormControl
        ref={inputRef}
        type="text"
        autoComplete="nope"
        autoFocus
        placeholder="Name"
        enterKeyHint="go"
        onChange={(e) => setInput(e.target.value)}
        value={input}
        onKeyDown={handleKeyDown}
    />
</Form>

问题截图：

解决方法 #

• 调整autoComplete属性：将autoComplete="nope"替换为autoComplete="off"或autoComplete="new-password"，Chrome对这两个属性值的识别更严格，能够有效禁用自动填充相关的工具栏。
• 结合readonly和onFocus：给FormControl添加readonly属性，在输入框获得焦点时移除该属性，绕过Chrome的工具栏触发逻辑：

  <FormControl
      ref={inputRef}
      type="text"
      autoComplete="off"
      autoFocus
      placeholder="Name"
      enterKeyHint="go"
      onChange={(e) => setInput(e.target.value)}
      value={input}
      onKeyDown={handleKeyDown}
      readonly
      onFocus={(e) => e.target.removeAttribute('readonly')}
  />
  

• 修改表单标识：在Form标签上添加autocomplete="off"，同时避免使用"name"这类常见字段名作为输入框的name属性（如果设置了的话），减少Chrome对表单字段的自动识别。
• CSS隐藏工具栏（应急方案）：通过Chrome专属CSS选择器隐藏工具栏元素，但这种方法可能影响其他输入功能，不推荐优先使用：

  input::-webkit-contacts-auto-fill-button,
  input::-webkit-credentials-auto-fill-button {
      visibility: hidden;
      display: none !important;
      pointer-events: none;
      position: absolute;
      right: 0;
  }
  

内容的提问来源于stack exchange，提问作者birgersp