时间戳

首页 > 解决方案 > 有输入时如何禁用搜索框的转换？

javascript - 有输入时如何禁用搜索框的转换？

问题描述

我不知道如何进一步描述这一点，如果很难理解我想说的话，我很抱歉。 你好，首先我想道歉，因为我是新手。我想知道如果可以确保codesnippet中的搜索框在我输入一些单词后不会变形。换句话说，当有输入时它不会回到原来的状态，即一个圆圈。提前谢谢你！

body {
  margin: 0;
  padding: 0;
  font-family: Century Gothic, sans-serif;
}

.displayNavigation input[type="search"],
.displayNavigation textarea {
  border: 1px solid grey;
  border-radius: 20px;
  border-bottom: 1px solid grey;
  background: transparent;
  outline: none;
  height: 25px;
  color: autoselect;
  font-size: 16px;
}

.displayNavigation {
  padding: 0 0 10px 0;
  transition: .4s;
  display: block;
  border-collapse: collapse;
  margin-bottom: 3px;
}

table {
  margin-top: 50px;
  margin-left: 50px;
}

.search-box {
  position: absolute;
  transform: translate(-7%, -25%);
  background: -moz-linear-gradient(top, #87a5ca, #144989);
  background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
  height: 40px;
  border-radius: 40px;
  padding: 4px;
  margin-top: 5px;
  margin-left: 25px;
  font-family: Century Gothic;
  sans-serif;
  cursor: pointer;
}

.search-box:hover>.search-txt {
  width: 240px;
  padding: 0 6px;
}

.search-box:hover>.search-btn {
  background: #e0e9f3;
}

.search-btn {
  color: #e84118;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #144989;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: .4s;
  border: none;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0px;
  color: white;
  font-size: 15px;
  transition: .4s;
  line-height: 40px;
  width: 0px;
}

::placeholder {
  color: rgba(255, 255, 255, .35);
  font-size: 15px;
  font-family: Century Gothic, sans-serif;
}
<html>

<head>
  <title>Search-Box</title>
</head>

<body>
  <table class="displayNavigation" align="center">
    <form method="POST" action="Search_Teachers.php">
      <td class="search-box">
        <input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
        <button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
      </td>
  </table>
  </form>
</body>

</html>

标签： javascriptjqueryhtmlcss

解决方案

这就是 javascript 的用途。要获得所需的行为，您可以在搜索字段中检查非空字符串。或者你可以像我在这里做的那样听一下点击并改变状态。这样，当您删除文本时它不会缩小。

body {
  margin: 0;
  padding: 0;
  font-family: Century Gothic, sans-serif;
}

.displayNavigation input[type="search"],
.displayNavigation textarea {
  border: 1px solid grey;
  border-radius: 20px;
  border-bottom: 1px solid grey;
  background: transparent;
  outline: none;
  height: 25px;
  color: autoselect;
  font-size: 16px;
}

.displayNavigation {
  padding: 0 0 10px 0;
  transition: .4s;
  display: block;
  border-collapse: collapse;
  margin-bottom: 3px;
}

table {
  margin-top: 50px;
  margin-left: 50px;
}

.search-box {
  position: absolute;
  transform: translate(-7%, -25%);
  background: -moz-linear-gradient(top, #87a5ca, #144989);
  background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
  height: 40px;
  border-radius: 40px;
  padding: 4px;
  margin-top: 5px;
  margin-left: 25px;
  font-family: Century Gothic;
  sans-serif;
  cursor: pointer;
}

.search-box:hover>.search-txt {
  width: 240px;
  padding: 0 6px;
}

 .search-txt:focus { 
  width: 240px;
  }
.search-box:hover>.search-btn {
  background: #e0e9f3;
}

.search-btn {
  color: #e84118;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #144989;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: .4s;
  border: none;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0px;
  color: white;
  font-size: 15px;
  transition: .4s;
  line-height: 40px;
  width: 0px;
}

::placeholder {
  color: rgba(255, 255, 255, .35);
  font-size: 15px;
  font-family: Century Gothic, sans-serif;
}
<html>

<head>
  <title>Search-Box</title>
</head>

<body>
  <table class="displayNavigation" align="center">
    <form method="POST" action="Search_Teachers.php">
      <td class="search-box">
        <input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
        <button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
      </td>
  </table>
  </form>
<script>
  const search = document.getElementsByClassName("search-txt")[0];
  search.addEventListener("click", function() {
    search.style.width = '240px';
  });

</script>
</body>

</html>

推荐阅读