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

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

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

在网页设计中，搜索框是一个非常重要的元素，它可以帮助用户快速找到他们需要的信息。为了提高用户体验，我们通常会在搜索框中添加一些默认的搜索文本，以提示用户应该输入什么样的关键词。在本文中，我们将详细介绍如何在HTML中使用JavaScript为搜索框添加默认搜索文本。

一、HTML搜索框的基本结构

在HTML中，我们通常使用<input>标签来创建搜索框。<input>标签的type属性可以设置为search，以表示这是一个搜索框。

以下是一个基本的搜索框HTML代码示例：

<!DOCTYPE html>
<html>
<body>

<form action="/how2html.com">
  <input type="search" id="mySearch" name="q">
  <input type="submit">
</form>

</body>
</html>

Output:

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

在这个示例中，我们创建了一个简单的搜索表单。当用户在搜索框中输入关键词并点击提交按钮时，表单会将用户的搜索请求发送到/how2html.com。

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

我们可以使用JavaScript的placeholder属性为搜索框添加默认搜索文本。placeholder属性的值会显示在搜索框中，当用户开始输入时，这个值会自动消失。

以下是一个使用JavaScript为搜索框添加默认搜索文本的HTML代码示例：

<!DOCTYPE html>
<html>
<body>

<form action="/how2html.com">
  <input type="search" id="mySearch" name="q">
  <input type="submit">
</form>

<script>
document.getElementById("mySearch").placeholder = "Search how2html.com";
</script>

</body>
</html>

Output:

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

在这个示例中，我们使用JavaScript的document.getElementById()方法获取了ID为mySearch的搜索框，然后设置了它的placeholder属性值为"Search how2html.com"。这样，当用户打开网页时，他们会在搜索框中看到这个提示信息。

三、使用JavaScript动态改变搜索框的默认搜索文本

有时候，我们可能需要根据用户的行为或者其他条件，动态地改变搜索框的默认搜索文本。这时，我们可以使用JavaScript的事件处理器来实现。

以下是一个使用JavaScript动态改变搜索框默认搜索文本的HTML代码示例：

<!DOCTYPE html>
<html>
<body>

<form action="/how2html.com">
  <input type="search" id="mySearch" name="q">
  <input type="submit">
</form>

<script>
var searchBox = document.getElementById("mySearch");

searchBox.onfocus = function() {
  if (searchBox.placeholder == "Search how2html.com") {
    searchBox.placeholder = "";
  }
};

searchBox.onblur = function() {
  if (searchBox.placeholder == "") {
    searchBox.placeholder = "Search how2html.com";
  }
};
</script>

</body>
</html>

Output:

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

在这个示例中，我们为搜索框添加了两个事件处理器：onfocus和onblur。当用户点击搜索框时，onfocus事件会被触发，我们将搜索框的placeholder属性值设置为空，以清除默认搜索文本。当用户点击搜索框以外的地方时，onblur事件会被触发，我们将搜索框的placeholder属性值设置为"Search how2html.com"，以恢复默认搜索文本。

四、使用JavaScript为搜索框添加多个默认搜索文本

有时候，我们可能需要为搜索框添加多个默认搜索文本，以提供更多的搜索提示。这时，我们可以使用JavaScript的数组和定时器来实现。

以下是一个使用JavaScript为搜索框添加多个默认搜索文本的HTML代码示例：

<!DOCTYPE html>
<html>
<body>

<form action="/how2html.com">
  <input type="search" id="mySearch" name="q">
  <input type="submit">
</form>

<script>
var searchBox = document.getElementById("mySearch");
var placeholders = ["Search how2html.com", "Search HTML", "Search JavaScript"];
var index = 0;

setInterval(function() {
  searchBox.placeholder = placeholders[index];
  index = (index + 1) % placeholders.length;
}, 2000);
</script>

</body>
</html>

Output:

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

在这个示例中，我们创建了一个包含三个默认搜索文本的数组placeholders，然后使用setInterval()函数每2秒钟改变一次搜索框的placeholder属性值。这样，用户会在搜索框中看到不断变化的搜索提示。

五、总结

在本文中，我们详细介绍了如何在HTML中使用JavaScript为搜索框添加默认搜索文本。我们首先介绍了HTML搜索框的基本结构，然后介绍了如何使用JavaScript的placeholder属性为搜索框添加默认搜索文本，接着介绍了如何使用JavaScript的事件处理器动态改变搜索框的默认搜索文本，最后介绍了如何使用JavaScript的数组和定时器为搜索框添加多个默认搜索文本。