输入后如何禁用搜索框的转换？

时间：2018-07-10 22:06:28

标签： javascript jquery html css

我不确定该如何进一步描述，对于无法理解我要说的内容，我们深表歉意。 您好，首先，我很抱歉，因为我是对此的新手。我想知道是否可以确保在输入一些单词后，代码片段中的搜索框不会转换。换句话说，它不会返回到其原始状态，即当有输入时，它是一个圆。 先感谢您！ 

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>

3 个答案:

答案 0 :(得分：1)

在您的输入中，您可以添加诸如id之类的内容，并且需要这样的内容：

<input id=someInput  autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search..." required>

在您的CSS中添加：

#someInput: :valid { width: 240px;}

使用无效的方法做您想做的事情

#someInput :invalid { what you want}

经过测试，效果很好，祝您好运！

答案 1 :(得分：1)

这就是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>

答案 2 :(得分：0)

您可以使用input:focus来确保键入/焦点对准时文本框足够宽

我已经添加了js，因此如果存在任何值，输入框将保持不变，希望这对您有所帮助

 
$('.search-txt').on("input", function() {
 if($('.search-txt').val())
  {
      $('.search-txt').addClass('inputExist');
  }
  else
    {
      $('.search-txt').removeClass('inputExist');
    }
 });
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, .search-txt.inputExist { 
      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;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<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>

相关问题
最新问题