Question

我的输入字段不允许我输入任何文本。我只能使用以前搜索过的显示为自动完成选项的字词。

我试图调整z-index和overflow属性，因为该站点上的一些答案已提出建议，但还是没有帮助。

编辑：我正在使用Materialize CSS。

我的车把代码：

.nav-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.login-container,
.registration-container {
  text-align: center;
}

.about-paragraph {
  margin-left: 1rem;
}

.gif {
  height: 300px;
  width: 400px;
  margin: 5px 0;
}

.save-gif-button {
  margin-bottom: 5px;
}

#search {
  width: 50vw;
}

#about-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#about-header {
  margin-top: 0.5em;
  margin-left: 1rem;
}

#gifs-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 80%;
  margin: 0 auto;
  align-items: center;
}

#trending-gif,
#searched-gif {
  width: 350px;
  height: 350px;
  margin: 5px 5px;
}

<div class="navbar-fixed">
  <nav class='teal lighten-1'>
    <div class="nav-wrapper" id="search-bar">
      <form id="search-form">
        <div class="input-field">
          <input id="search" type="search" required>
          <label class="label-icon" for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>

      <a href="#" data-target="mobile-demo" class="sidenav-trigger "><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/login">Login</a></li>
        <li><a href="/register">Register</a></li>
      </ul>
    </div>
  </nav>
</div>

<ul class="sidenav" id="mobile-demo">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/login">Login</a></li>
  <li><a href="/register">Register</a></li>
</ul>

没有错误消息出现。我根本无法输入自己的搜索字词。

Answer 1

我意识到我的代码错误。我将e.preventDefault（）放在函数调用之前的事件侦听器中，这阻止了我键入自己的输入。

输入字段不允许我输入输入

1 个答案: