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

【问题标题】：Firefox autofill puts input on top of loading divFirefox 自动填充将输入置于加载 div 之上
【发布时间】：2020-04-15 00:25:21
【问题描述】：

我正在尝试使用 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 时似乎没有出现此问题。

【问题讨论】：

标签： reactjs firefox autofill

【解决方案1】：

这很容易解决，只需添加

z-index:1

到正在加载的 div。

【讨论】：