使用 CSS 和 JavaScript 的全屏搜索栏

在现代网站中，搜索功能对于用户来说是一个非常重要的组件。为了提高用户体验，我们可以考虑使用全屏搜索栏。全屏搜索栏可以使用户更轻松地找到他们想要的内容，而不必在整个网站上浏览。

本文将介绍如何使用 CSS 和 JavaScript 来创建一个全屏搜索栏。

1. HTML 结构

我们需要在 HTML 页面中添加一个搜索框的 HTML 结构，并在其后面添加一些 CSS 和 JavaScript 来实现全屏搜索。

<div class="search-bar">
  <form>
    <input type="search" placeholder="搜索...">
    <button type="submit"><i class="fa fa-search"></i></button>
  </form>
</div>

在上面的 HTML 结构中，我们使用了 <div> 元素作为搜索栏的容器，其中包含了一个 <form> 元素，里面包含了一个 <input> 元素和一个 <button> 元素。<input> 元素设置了搜索框的类型为“search”，并为其设置了“placeholder”属性。<button> 元素中，我们还加上了一个“fa fa-search”类来显示搜索图标。

2. CSS 样式

接下来，我们需要添加样式来使这个搜索栏出现在整个页面上方的所有页面中，包括占据整个屏幕。

.search-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
}

.search-bar .fa {
  color: white;
}

.search-bar form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-bar input[type="search"] {
  padding: 15px;
  border: none;
  border-radius: 50px;
  font-size: 24px;
  width: 90%;
  margin: 0 0 20px 0;
}

在上面的 CSS 中，我们将 .search-bar 元素设置为具有绝对位置，并且覆盖整个屏幕。我们使用了“rgba（0,0,0,0.8）”颜色作为背景色，这将在搜索栏上方创建半透明背景。我们还设置了 .search-bar 元素的样式为“display:none”，以便在页面加载时将其隐藏。

接下来，我们使用 .search-bar form 中的 justify-content 和 align-items 属性将搜索框和搜索图标垂直和水平居中。使用 .search-bar input[type="search"] 的样式设置，“padding”、“border-radius”和“font-size”属性让搜索框更易于使用。

3. JavaScript 脚本

我们需要添加一些 JavaScript 代码来使搜索栏在页面上出现或消失：

const search = document.querySelector(".search-bar");
const searchInput = document.querySelector(".search-bar input[type='search']");
const searchButton = document.querySelector(".search-bar button");

function toggleSearch() {
  search.classList.toggle("active");
  searchInput.focus();
}

searchButton.addEventListener("click", (e) => {
  e.preventDefault();
  toggleSearch();
});

window.addEventListener("keyup", (e) => {
  if (e.key === "Escape") toggleSearch();
});

在上面的 JavaScript 代码中，我们首先定义三个变量——.search-bar 元素、.search-bar 输入元素和 .search-bar 按钮元素。

然后，我们定义了一个名为 toggleSearch() 的函数，该函数将切换 .search-bar 元素上 active class 的出现或消失，并将输入元素聚焦在搜索框上，每次单击搜索按钮时，该函数将被调用。

最后，我们在窗口对象上添加了一个键盘事件监听器，如果用户按下“Escape”键，则调用 toggleSearch() 函数，搜索框将消失。

4. 效果演示

现在，我们已经建立了一个具有完整 CSS 和 JavaScript 代码的全屏搜索栏。

您可以点击此链接查看完整的演示页面示例代码。