html - 输入字段不允许我输入内容

Question

我的输入字段不允许我输入任何文本。我能够使用的唯一输入是以前搜索过的术语，这些术语显示为自动完成选项。

我尝试按照本网站上的几个答案的建议调整 z-index 和 overflow 属性，但没有成功。

编辑:我正在使用 Materialize CSS。

我的 Handlebars 代码:

.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() 放在我的事件监听器中，这阻止了我输入自己的输入。