满足以下2个条件时；

浏览器会自动记录输入过的值；

当用户再次输入的时候就能自动完成；

1：input标签在form标签下；

2：点击了此form标签下的submit按钮；

具体的表现形式如下图；

浏览器自动显示输入过的值后会遮挡到下面的验证码；

对于我这种记性差到即便只有这4个数字都懒得记；

非要边看着验证码边输入的人是无法忍受的；

额；好吧；我承认记性是躺枪的；主要是懒；

如果说验证码这个示例你能忍受的话；

那么下面这张图肯定是无法忍的了；

这个搜索框有一个ajax 事件了；

当输入内容后会发送异步请求搜索商品；

但是浏览器的自动显示的输入记录就会遮挡后边的搜索结果；

解决这个情况的方法是为input标签添加autocomplete属性并设为off

<input class="text" autocomplete="off" type="text" name="word" value="输入商品名称">

顺便介绍下autocomplete；

autocomplete是HTML5 中的新属性它规定表单是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

值描述

1. on默认。规定启用自动完成功能。
2. off规定禁用自动完成功能。

天，我们将学习如何制作一个在悬停时展开和折叠的侧边栏。它看起来很漂亮，实现比看起来简单得多。我们将逐步完成本教程，并且在此过程中我还将介绍一些值得注意的HTML / CSS技巧。

以下是本文将涉及的提示和技巧列表：

• 将栏放在侧边栏中
• 在悬停时更改项目的颜色
• 您需要了解如何修复的Google材质图标存在问题
• onmouseover和onmouseout事件
• 如何将物品保持在一条线上并防止缠绕
• 如何隐藏侧边栏中溢出的文本
• 如何实现平滑过渡

让我们开始！

第1部分：创建一个简单的侧边栏

可以在此笔中找到此步骤的完整代码：https://codepen.io/dalisc/pen/rEjRWo

只使用HTML，您的网页将如下图所示。一些CSS可以做出什么改变！所以我们需要用一些CSS来设置它，使其看起来像上面的gif。

从第1部分学习的CSS技巧和窍门：

• 将栏放在侧边栏中

.sidebar {
 height: 100%;
 width: 250px;
 position: fixed;
 top: 0;
 left: 0;
 background-color: #111;
 padding-top: 60px;

此代码为侧边栏提供250px（width：250px;）的宽度，背景颜色为深色（background-color：＃111;），并使其在页面上完全垂直延伸（height：100％;）。在code pen以自定义侧边栏。

• 悬停时更改侧边栏项目的颜色

.sidebar a {
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 25px;
 color: #818181;
 display: block;
}

在这里，我们使用“text-decoration：none;”删除了文本的下划线和蓝色，并在侧边栏项目周围添加了填充和块显示的一些空格。增强用户体验的部分是当项目颜色从灰色变为白色时，这可以通过以下代码完成：

.sidebar a:hover {
 color: #f1f1f1;
}

此代码表示当您将鼠标悬停在类“侧栏”中用<a>标记的元素上时，元素的颜色将更改为您设置的任何颜色，在本例中为＃f1f1f1。

• 您需要了解如何修复的Google材质图标存在问题

如果您使用Google的素材图标，您会发现一个令人沮丧的问题：默认情况下，图标和相邻文字没有正确垂直对齐。

.material-icons,
.icon-text {
 vertical-align: middle;
}
.material-icons {
 padding-bottom: 3px;
 margin-right: 30px;
}

你需要做的是在CSS中垂直对齐它们（vertical-align：middle;）。即使这样，对齐也有点偏离，所以在此之后给你的图标一个3px垂直增强（padding-bottom：3px;）。

第2部分：检测您的鼠标是否悬停在侧边栏上

现在我们将添加一些Javascript，因为我们将在侧边栏中引入一些功能。可以在此笔中找到此步骤的完整代码

• HTML提示：onmouseover和onmouseout

两个非常有用的事件是onmouseover和onmouseout，它们分别检测您的鼠标是否悬停在特定元素之上或之外。对于我们的侧边栏，我们希望检测位于侧边栏的任何部分，因此我们需要将这些事件添加到侧边栏的<div>中，如下所示：

<div id=”mySidebar” class=”sidebar” onmouseover=”somethinghappens” onmouseout=”somethinghappens”>

现在，我们可以决定鼠标悬停在侧边栏上或从边栏悬停的情况。我们需要将“ somethinghappens”替换为我们想要实际发生的事情，但首先，让我们通过向控制台发送消息来检查是否发生了检测。

现在让我们编写两个Javascript函数来确认检测到事件：

function testIn() {
 console.log(“hovering in sidebar”);
}
function testOut() {
 console.log(“hovering outside sidebar”);
}

更新我们的侧边栏：

<div id=”mySidebar” class=”sidebar” onmouseover=”testIn()” onmouseout=”testOut()”>

现在进行悬停并检查控制台以查找我们编写的消息。它应该可以工作了！我们已经设置了告诉侧边栏是折叠还是展开所需的检测。

第3部分：展开/折叠侧边栏

可以在此笔中找到此最终部分的完整代码：https：//codepen.io/dalisc/pen/qzRGxQ

我们将折叠边栏称为迷你侧边栏。我们现在想要根据鼠标是否悬停在我的侧边栏上进行两次查找，因此我们需要在javascript部分中创建一个布尔变量mini。

我们还将创建一个函数来切换侧边栏的扩展。该功能的逻辑如下：如果侧边栏处于迷你模式，将鼠标悬停在侧边栏上会将侧边栏扩展为其完整模式（并将变量mini设置为false）。如果侧边栏处于完全模式，将鼠标悬停在侧边栏上会将其折叠为迷你模式（并将变量mini设置为true）。

因此，我们需要更改onmouseover和onmouseout事件，并相应地引入新函数toggleSidebar（）。

更改html：

<div id=”mySidebar” class=”sidebar” onmouseover=”toggleSidebar()” onmouseout=”toggleSidebar()”>

添加到JS（我们现在可以删除testIn()和testOut()）：

var mini = true;
function toggleSidebar() {
if (mini) {
 console.log(“opening sidebar”);
 document.getElementById(“mySidebar”).style.width = “250px”;
 document.getElementById(“main”).style.marginLeft = “250px”;
 this.mini = false;
} else {
 console.log(“closing sidebar”);
 document.getElementById(“mySidebar”).style.width = “100px”;
 document.getElementById(“main”).style.marginLeft = “100px”;
 this.mini = true;
 }
}

从功能中可以看出，它基本上都是改变侧边栏黑色块的宽度。完整模式的宽度为250px，迷你模式的宽度为85px。我们还策略性地定位文本和图标，以便在侧边栏折叠时完全隐藏文本，仅显示图标。

默认情况下，我们希望侧边栏处于迷你模式，因此我们也将侧边栏的宽度（最初未被遮挡时）更改为85px。

.sidebar {
 height: 100%;
 width: 85px;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 transition: 0.5s;
 padding-top: 60px;
}

当前默认外观：

此时，文本溢出仍有一些问题，所以我将介绍一些CSS提示和技巧！

从第3部分学习的CSS技巧和窍门：

• 如何在一行中获取图标和文本

将“white-space：nowrap;”添加到侧栏CSS。

.sidebar {
 height: 100%;
 width: 85px;
 position: fixed;
 top: 0;
 left: 0;
 background-color: #111;
 padding-top: 60px;
 white-space: nowrap;
}

即使文本大于侧边栏的宽度，这也会阻止文本换行到下一行。但正如你在下面看到的那样，虽然它现在在一行中，它会溢出，你可以看到溢出...所以我们需要找到隐藏它的方法！

s

• 如何隐藏侧边栏中溢出的文本

要隐藏溢出的文本，只需将“overflow-x：hidden;”和“z-index：1;”添加到侧边栏css即可。这将隐藏任何宽于侧边栏宽度的内容。

.sidebar {
 height: 100%;
 width: 85px;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 overflow-x: hidden;
 padding-top: 60px;
 white-space: nowrap;
}

现在我们的侧边栏看起来非常好！（我也改变了主要内容，但主要内容未在本教程中介绍，它包含在code pen。）

• 如何为扩展创建平滑过渡

现在我们已经遇到了我们需要修复的最后一个小故障，以使侧边栏顺利移动。目前，随着侧边栏折叠和展开，没有动画添加到它，所以它看起来有点不连贯，像这样：

所以我们想要的是一个非常平滑的过渡，如第一页上的gif所示。现在，变化立即发生。为了顺利，我们需要减缓变化。首先，我们需要让侧边栏扩展得更慢，比方说0.5秒。将其添加到侧边栏CSS。

.sidebar {
 height: 100%;
 width: 85px;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 overflow-x: hidden;
 transition: 0.5s;
 padding-top: 60px;
 white-space: nowrap;
}

我们还需要将主要部分同时推到左侧。

#main {
 transition: margin-left .5s;
 padding: 16px;
 margin-left: 85px;
}

你有一个漂亮的侧边栏！

在GitHub存储库中找到完整的工作代码：https：//github.com/dalisc/hover-collapsible-sidebar

转：https://medium.com/@9cv9official/create-a-beautiful-hover-triggered-expandable-sidebar-with-simple-html-css-and-javascript-9f5f80a908d1