Firefox 自动填充将输入置于加载之上 div

Question

我正在尝试使用 React 制作一个非常基本的表单，其中包含一些输入和一个提交按钮。当提交按钮被按下时，加载屏幕基本上只是一个不透明度为 0.9 的 div 应该覆盖屏幕。如果表单是使用自动填充（或自动完成，以浏览器为您填写整个表单的那个为准）填写的，表单上的输入不会被加载屏幕覆盖，我可以编辑它们，就好像它们在div 的顶部。下面是问题的例子

如果我自动填写表格，然后手动编辑其中一个输入，则该输入将被 div 覆盖，而其余的仍在其顶部。我不确定问题是什么，或者是否可以解决，但我们将不胜感激。 Here is the codepen 如果你想尝试一下。

const App = ()=>{
  const [loading, changeLoading] = React.useState(false)
  const submit = (e) =>{
    e.preventDefault();
    e.stopPropagation;
    changeLoading(true);
  }
  return(
    <div>
      {loading &&
      <div className = 'loading'>
        <h1>Loading...</h1>
      </div>}

      <form autocomplete = 'on' onSubmit = {submit}>
        <label forHtml = 'name'>Name</label>
        <input 
          name = 'name'
          id = 'name'
          autocomplete = 'name'
         />

        <label forHtml = 'email'>Email</label>
        <input 
          name = 'email'
          id = 'email'
          autocomplete = 'email'
         />

        <label forHtml = 'tel'>Phone</label>
        <input 
          name = 'tel'
          id = 'tel'
          autocomplete = 'tel'
         />
        <input 
          type = 'submit'
          onClick = {submit}></input>
      </form>
     </div>
   )
 }

当我使用 Chrome 时似乎没有出现此问题。

Answer 1

只需添加

即可轻松解决此问题

z-index:1

正在加载div.

Firefox 自动填充将输入置于加载之上 div

Firefox autofill puts input on top of loading div

firefox

autofill

reactjs