在HTML中使用JavaScript为搜索框添加默认搜索文本|极客笔记

在HTML中使用JavaScript为搜索框添加默认搜索文本

参考： Adding default search text to search box in HTML with JavaScript

在网页设计中，搜索框是非常常见的一个元素。为了提高用户体验，我们通常会在搜索框中添加一些默认的搜索文本，以提示用户输入什么样的信息。本文将详细介绍如何在HTML中使用JavaScript为搜索框添加默认搜索文本。

一、HTML搜索框的基本结构

在HTML中，搜索框通常由<input>标签创建，其type属性设置为"search"。例如：

<form action="/search" method="get">
  <input type="search" name="q" placeholder="Search...">
  <input type="submit" value="Go">
</form>

在这个例子中，<input type="search">创建了一个搜索框，placeholder属性设置了搜索框的占位符文本，<input type="submit">创建了一个提交按钮。

二、使用JavaScript添加默认搜索文本

我们可以使用JavaScript来动态地为搜索框添加默认搜索文本。这可以通过修改搜索框的value属性来实现。例如：

<script>
window.onload = function() {
  var searchBox = document.querySelector('input[type="search"]');
  searchBox.value = 'Search how2html.com';
};
</script>

在这个例子中，我们首先使用document.querySelector方法获取搜索框元素，然后修改其value属性，将默认搜索文本设置为”Search how2html.com”。

三、在搜索框获取焦点时清除默认搜索文本

为了提高用户体验，我们通常希望在用户点击搜索框时，自动清除默认搜索文本。这可以通过监听搜索框的focus事件来实现。例如：

<script>
window.onload = function() {
  var searchBox = document.querySelector('input[type="search"]');
  searchBox.value = 'Search how2html.com';
  searchBox.onfocus = function() {
    if (this.value === 'Search how2html.com') {
      this.value = '';
    }
  };
};
</script>

在这个例子中，我们添加了一个focus事件监听器，当搜索框获取焦点时，如果其value属性等于默认搜索文本，就将其清空。

四、在搜索框失去焦点时恢复默认搜索文本

同样，我们也希望在用户点击搜索框以外的地方，或者按下Tab键切换焦点时，如果搜索框是空的，就自动恢复默认搜索文本。这可以通过监听搜索框的blur事件来实现。例如：

<script>
window.onload = function() {
  var searchBox = document.querySelector('input[type="search"]');
  searchBox.value = 'Search how2html.com';
  searchBox.onfocus = function() {
    if (this.value === 'Search how2html.com') {
      this.value = '';
    }
  };
  searchBox.onblur = function() {
    if (this.value === '') {
      this.value = 'Search how2html.com';
    }
  };
};
</script>

在这个例子中，我们添加了一个blur事件监听器，当搜索框失去焦点时，如果其value属性是空的，就将其设置为默认搜索文本。