如何验证空白输入搜索框

Question

如何让搜索输入识别有输入字符串？ 下面的代码有效，但即使没有输入任何输入，如果我单击搜索或输入，它仍然会进行搜索。换句话说，即使搜索输入为空白，它仍然会搜索。这只是一个项目，有人有什么想法吗？

<input type="text" id="textInput" name="" class="query">

   <script>
      let query = document.querySelector('.query');
      let searchBtn = document.querySelector('.searchBtn');

      searchBtn.onclick = function(){
          let url = 'https://www.google.com/search?q='+query.value;
          window.open(url,'_self');
      }
  </script>  
   <script>
      var input = document.getElementById("textInput");
      input.addEventListener("keyup", function(event) {
          if (event.keyCode === 13) {
              event.preventDefault();
              document.getElementById("searchButton").click();
          }
      });
   </script>

Answer 1

只需检查（有效）长度，大于零或大于三个字符即可获得任何有意义的结果（取决于您的搜索）。

   <script>
      let query = document.querySelector('.query');
      let searchBtn = document.querySelector('.searchBtn');

      searchBtn.onclick = function(){
          if(query.value.trim().length){ // maybe length>3 ?
              let url = 'https://www.google.com/search?q='+query.value;
              window.open(url,'_self');
          }
      }
  </script>  
   <script>
      var input = document.getElementById("textInput");
      input.addEventListener("keyup", function(event) {
          if (event.keyCode === 13) {
              event.preventDefault();
              document.getElementById("searchButton").click();
          }
      });
   </script>

Answer 2

您必须检查输入的value 是否存在或不是empty。 您还可以检查：

• input.value.length
• input.value !== ""
• 输入值

  let query = document.querySelector('.query');
  let searchBtn = document.querySelector('.searchBtn');

  searchBtn.onclick = function() {
    let url = 'https://www.google.com/search?q=' + query.value;
    window.open(url, '_self');
  }

  var input = document.getElementById("textInput");
  input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13 && input.value) {
      event.preventDefault();
      document.getElementById("searchButton").click();
    } 
  });

<input type="text" id="textInput" name="" class="query">
<button class="searchBtn">Search</button>

Working Fiddle

Answer 3

如果您将输入包装在 <form></form> 中，则可以使用 HTML5 的 built in validation。

在我的例子中：

pattern="[\S]+"表示除空格外的所有字符都有效

required 表示输入长度必须至少为 1 个有效字符

另外，我正在根据输入的有效性切换按钮的 disabled 属性。在我看来，它可以提供更好的用户体验，让用户在单击按钮之前知道某些内容不正确。

let button_search = document.querySelector('button.search');
let input_query = document.querySelector('input.query');

button_search.addEventListener('click', function() {
  if (input_query.validity.valid) {
    window.open('https://www.google.com/search?q=' + input_query.value, '_self');
  }
});

input_query.addEventListener('keyup', function(event) {
  button_search.disabled = !input_query.validity.valid; //visual indicator input is invalid

  if (event.keyCode === 13) {
    button_search.click();
  } 
});

<form>
  <input class="query" pattern="[\S]+" required>
  <button class="search" disabled>Search</button>
</form> 

最后一想，除非有特定原因需要在单独的范围内运行代码，否则您可以将所有代码放在一个 <script></script>