时间戳

首页 > 解决方案 > Firefox 自动填充将输入置于加载 div 之上

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

问题描述

我正在尝试使用具有一些输入和提交按钮的 React 制作一个非常基本的表单。当按下提交按钮时，一个基本上只是一个不透明度为 0.9 的 div 的加载屏幕应该覆盖屏幕。如果表单是使用自动填充（或自动完成，以浏览器为您填写整个表单中的哪一个）填充的，则表单上的输入不会被加载屏幕覆盖，我可以像在打开它们一样编辑它们div 的顶部。这是一个问题的例子在此处输入图像描述

如果我自动填写表单，然后手动编辑其中一个输入，则该输入将被 div 覆盖，而其余输入仍位于其顶部。我不确定问题是什么，或者是否可以修复，但感谢您提供任何帮助。如果您想尝试一下，这里是 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 时，似乎不会出现此问题。

标签： reactjsfirefoxautofill

解决方案

只需添加即可轻松解决此问题

z-index:1

到加载 div。

推荐阅读