使用原生JavaScript实现搜索框点击展开特效

原生JavaScript实现搜索框点击展开特效

搜索框是网页上常见的元素，它允许用户输入关键词来搜索信息。为了增强用户体验，我们可以为搜索框添加点击展开特效。当用户点击搜索框时，搜索框会展开，显示出更多的搜索选项。

HTML代码

首先，我们需要在HTML中创建一个搜索框。可以使用以下代码：

<input type="text" id="search-box" placeholder="Search">

<input>元素用于创建搜索框，type属性指定搜索框的类型，id属性指定搜索框的ID，placeholder属性指定搜索框的提示文本。

CSS代码

接下来，我们需要使用CSS来设置搜索框的样式。可以使用以下代码：

#search-box {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#search-box:focus {
  border-color: #000;
}

#search-box选择器用于选择搜索框，width属性和height属性指定搜索框的宽高，padding属性指定搜索框的内边距，border属性和border-radius属性指定搜索框的边框样式。

当搜索框获得焦点时，#search-box:focus选择器会被激活，此时搜索框的边框颜色会变成黑色。

JavaScript代码

最后，我们需要使用JavaScript来实现搜索框点击展开特效。可以使用以下代码：

const searchBox = document.getElementById('search-box');

searchBox.addEventListener('click', () => {
  searchBox.classList.toggle('expanded');
});

const searchBox = document.getElementById('search-box');代码获取搜索框元素。

searchBox.addEventListener('click', () => { ... });代码为搜索框元素添加点击事件监听器。当用户点击搜索框时，() => { ... }代码块中的代码就会被执行。

searchBox.classList.toggle('expanded');代码用于在搜索框元素上切换expanded类。当搜索框元素上存在expanded类时，搜索框就会展开。

效果预览

将以上HTML、CSS和JavaScript代码添加到网页中，就可以看到搜索框点击展开特效了。当用户点击搜索框时，搜索框会展开，显示出更多的搜索选项。

总结

本文介绍了如何使用原生JavaScript实现搜索框点击展开特效。这个特效可以增强用户体验，让网页看起来更加美观。读者可以根据本文提供的代码轻松实现这个效果。