前言

先前写了一篇《被遗忘的CSS和HTML（一）》，后来因为各种事情，懒得写。决定就再写点，希望从另一个角度去看一些问题的解决方法，还是那句话：

各种技术都有其适用场景

这里更多的是探讨另一种思考问题和解决问题。

最近几年，前端的发展向Javascript侧重，基本上一个问题过来，JS唰唰地写起来。确实，JS的势头很猛，跟页面相关的问题，基本上是可以用JS解决，而CSS和HTML往往会被忽略，虽然CSS3有时候给人也很厉害的方案。

好的，话也不多说，能抓老鼠的都是厉害的猫，咱们就聊聊用CSS和HTML这两只小猫能不能抓一些不一样的老鼠吧。

表单验证

最常见的表单就是登录和注册表单了。以登录这例，基本过程就是：

用户输入 => 用户提交 => 验证输入 => 提交后端

至于后端的处理及之后的动作，我们就不讨论了。

用户提交表单，通常有两种方式：

1. 点击表单的登录按钮

2. 敲回车键

没有去了解过这两种方式哪种更普遍，于我个人而言，我都是敲回车键。除非这个网站或应用本身不支持，我才会去点击登录按钮。如果是后者，一般给我的第一印象就是，这个网站或应用的体验不好。这个当然是个人的习惯哈……

这里，我们要讨论的验证指的是从开发角度讲，什么时候验证，也就是表单验证的时机问题。从交互讲，有四种方式：

1. 即时验证：用户边输入边验证

2. 失焦验证：用户的输入焦点离开时验证，通俗讲就是blur时验证

3. 提交验证：用户输入完表单，操作提交后验证

4. 后端验证：前端不做验证，直接将数据提交给后端，由后端验证

每种方式的优劣，我就不讲了，不在本文的讨论范围，这里只针对第3种提交验证。上面也说了，提交表单无非两种方式，对应到代码上就是click/touch事件和keyup/down/press事件。

我不下一次看到有人使用监听这两类事件，然后在他们的回调里去做验证逻辑，比如，某知名房产中介公司，他们的代码里有这样一行：

$("#con_login_user").delegate("input", "keyup", function(e) {    13 == e.keyCode && $(".login-user-btn").click()
});

首先，不去猜测别人的意图哈，最佳的表单提交callback，事实上并不需要任何input/keyup/click这类事件去处理，form本身自带响应提交功能，只是后来前端用多了，似乎有的人忘了这回事。

form表单天生带有submit事件，表单验证只是表单提交前的一个交互动作（验证用户输入的合法性，及早提示，避免多余请求），而要触发submit事件，表单元素天生具有触发功能：

1. input/radio/checkbox等元素focus时，只要form表单是一个正常表单，回车即可

2. button[type=submit]/input[type=submit]，点击即可触发，不需要

记得这两点，你的表单验证功能就只需要声明form的submit事件，在submit回调中去做验证，对失败的验证，操作错误提示，并preventDefault即可。

细心的人会发现，上面提到了正常表单，怎么理解一个form是正常表单呢，需要保证以下两规则：

1. 声明form[action]和form[method]

2. 表单内具有[type=submit]的buton或input

养成个好习惯，多用上面两条规则，在某些你们认为的奇葩问题里，也许，它们就是“解决方案”。打个比方，先前在美团时候，看到那个美团技术博客（你们应该知道是哪个，我是忘了全称了）里有提到

iOS里，input[type=search]不会触发虚拟键盘的Enter键显示搜索的图标

我当时就觉得吧，这人写博客是不是有点太草率了，关键还说这是iOS的bug。后来我去他们的微信公众号上找到了这篇文章，并评论了，然而，人家不理我哈。。呵呵。

事实上，这并非所谓的bug，而是我们在使用input[type=search]时，太过于随便了。早些年还好，现在写JS的人，好多总是莫名其妙的依赖JS，而把HTML和CSS置于“能用就好”的位置，而在这样简单的例子里，却也没有能用。我简单说一下怎么解决这个“问题”：

1. input[type=search]元素放在form元素内

2. form元素声明action和method属性，不要为空，好好写个正常值

关于第二点，你可能会发现在不同版本的iOS里，可能并不用两个属性都声明，但是，由于iOS各版本表现的不一致性，最好还是老老实实写完整来。

定位

这里说的定位不是position。

定位：指的是快速定位到页面的某个位置。说白了就是让浏览器滚动条快速滚动到特定位置。

最觉见的定位功能是返回顶部，这个功能可以说是长页面的标配功能了，通常是在页面的右下角，有一个按钮，点击后可以快速返回到顶部，如下图：

返回顶部功能

图中的第一个小icon便是返回顶部。通常，这种功能就是一句话：

theButton. = () => window.scrollTo(0, 0)

核心功能就是这么简单。现在，我们想想，如果不要写JS呢，能不能实现。

当然可以，事实上，HTML自带有定位功能。说到这里，相信你一定会想到：锚点。

是的，这是一个原生HTML定位功能，锚点，就好比船只的锚，将船只固定在特定位置。锚点定位我就不再讲了，我想说，还有吗？

事实上，还有一个需要换个角度想：input/textarea。

当input或textarea聚集(focus)时，实际上是会触发浏览器的滚动条定位的，也就是说，如果你的inupt或textarea不在当前视窗内，那浏览器会将页面滚动到特定位置，以便于input和textarea显示在视窗内。

换个角度，这是一种定位。使用input或textarea定位和锚点一样的简单：

<input type="text" id="fast-position-test" /><!-- ...这里就是一堆的HTML了，很长很长，长到有滚动条 --><label for="fast-position-test">返回顶部</label>

使用label[for]，我们就可以将返回顶部置于页面的任何地方，而将input放置在页面顶部，如果页面有滚动，必然input框会显示在视窗外，当我们点击返回顶部时候，浏览器就会将页面滚动到顶部了。

当然，我们的input应该是隐藏的，这个加个CSS就可以了。

显示和隐藏

曾经，在前公司有个这样的需求：

1. 顶部有个通栏banner位

2. banner上有个x，用来关闭该banner

3. 页面右下角有几个通用按钮，如返回顶部、客服按钮、APP二维码

4. 点击2中提到的x，关闭banner，并在3中添加一个按钮，用于重新打开banner

5. 点击4中添加的按钮，打开banner

简单来讲，就大概像下面这两个图：

底部通栏banner

为了避免广告植入，上述图1被模糊了。

当点击图中右上角的x，就会变成：（请仔细看x的右上角，有个二维码样的icon）

关闭banner后，添加新按钮

二维码样的icon上面多出了一个小程序下单的icon，点击这个icon，就会恢复前面的底部通栏Banner。

功能大体上是这样的。类似这样的功能，其实在某宝手机端也是有的：

某宝上的类似功能-0

某宝上的类似功能-1

点击左图红色框中的“1/100”，就会出现底部变了个样子，点击右图的那个紫色框，就会恢复到左图了。

这种功能，在很多地方都会有，比如各大OTA网站上，相当常见底部放个通栏banner，然后点击关闭换了个展示，新展示又可以再展开banner。。。

这很简单啊，加个事件，display none和block一下就行了。代码逻辑大概就长这样：

theBannerCloseBtn. = () => {
  theBanner.style.display = "none"
  theAsideIcon.style.display = "block"}

theAsideIcon. = () => {
  theBanner.style.display = "block"
  theAsideIcon.style.display = "none"}

现在的问题是，不要用任何JS代码呢，只使用HTML和CSS，怎么实现？

如果你有看我之前的一篇文章被遗忘的CSS和HTML（一）介绍的锚点与:target，你应该会想，可以通过锚点和:target实现。确实，这是其中的一种方法。只是我也提到过，锚点也有自身的问题，其中之一便是：历史记录。

前一篇文章的场景是，我们确实想要利用历史记录的功能来实现返回。

这个场景里，我们并不希望出现历史记录，而仅是简单的点击交互。

其实，控制显示隐藏，本来就是CSS的专长，你用JS，本质上只是通过JS操作DOM元素，依然是CSS在处理显示隐藏。

仔细分析这个简单的功能，事实上，它是这样的：

1. 点击

2. 显示和隐藏

刚已经说了，第二点就是CSS做的。要让一个元素显示隐藏CSS很简单:

.el {  display: none;
}.el.show {  display: block;
}

问题就是，怎么触发点击，如何让CSS响应到点击的操作？

这更多的不是一个技术问题，而是思路转换的问题。毫无疑问，CSS（至少目前为止）并不能像JS那样，通过事件去响应用户的操作。但是，CSS是有一些响应用户操作的功能，比如：:hover，就是CSS响应用户的鼠标滑过操作。怎样理解CSS响应用户操作呢，我概况为下面一句话：

用户操作引起了UI界面的变更，这些变更可以通过CSS属性定义，便是CSS响应用户操作

打个比方，你点击了一个未访问过的a链接，a标签实际上会有一连串的响应：hover -> active -> visited。在没有自定义CSS样式时，不同的响应，会有不同的UI变化，比如，hover会让a链接字体变蓝。

回到我们的问题，现在我们知道，CSS是有响应用户操作的功能，对于本题，我们需要的是响应用户点击操作，反应速度快的，一定会想到，a:visited就可以响应用户的点击了。换个角度看，这确实是响应了用户点击操作，只是很遗憾，在这个问题上，a:visited很难满足。

我就直说了，label元素。

点击label[for]（或<label>Test<input /></label>）元素，for所指的表单元素实际上就会响应这个点击操作，input[type=text]会聚焦(focus)，出现光标，input[type=submit]会触发form表单的提交（相当于点击了input），input[type=radio | checkbox]会被选中等等。

看到这里，相信大家心里有数了，这里，我们要用的就是label[for]+input[type=checkbox]+:checked。完整的代码我就不弄了，大体是这样的：

HTML结构：

<!-- 我们的HTML类似这样 --><aside>
  <input type="checkbox" class="toggler-box" id="toggler-box" />
  <div class="banner">
    <label for="toggler-box">x</label>
  </div>
  <div class="aside-container">
    <label for="toggler-box" class="miniapp-btn">小程序下单</label>
    <button>others</button>
  </div></aside>

CSS代码：

<!-- 主要的CSS代码 -->.aside-container .miniapp-btn {  display: none;
}.toggler-box:checked ~ .banner {  display: none;
}.toggler-box:checked ~ .aside-container .miniapp-btn {  display: block;
}

至于动画神马，也只是把display: none | block换成transition或animation而已。

自定义表单元素

相当简单哈，一个div，border-radius: 50%; 再加上事件，点击时候切换一下class，一个radio就可以了，简直是简单的不要太爽。

确实，相当简单的，对于移动端来讲，这是挺好的。然而，如果是PC，是不是应该多想下还有没有其他的问题：

1. 支持tab吗

2. 支持键盘选中和取消吗

3. 支持键盘enter提交数据吗

这3点都是表单元素自带功能，如果你的自定义表单元素不能实现这些功能，那……也可以。只是，更完善的模拟表单元素，给用户提供更好的体验，不是更好吗。

要实现上面的三点，其实，我们可以保留表单元素，配合:checked，:focus这些伪类，还原表单元素固有交互。以一个checkbox来讲：
HTML结构：

<label>  <input type="checkbox" name="box" class="test-box" />
  <span class="box-simulator"></span>
  选我吧</label>

CSS样式：

.simulator {  position: relative;
}.test-box {  position: absolute;  z-index: -1;  left: 0;  top: 0;  /* 使用visibility: hidden 来隐藏，是为了让tab键可以捕获到，如果使用display: none，无法捕获，也可以opcity: 0 */
  visibility: hidden;
}.box-simulator {  color: #999;  border: 1px solid;  display: inline-block;  width: .7em;  height: .7em;  border-radius: 2px;
}.test-box:checked + .box-simulator {  /* 这里只是简单填充成一个色块来代表选中 */
  color: #ff920b;  background-color: #ff920b;
}.test-box:focus + .box-simulator {  /* focus就是tab捕获到后触发的，tab键捕获，实际上就是focus */
  color: #ff3333;
}

至于支持键盘enter提交数据，在上面的基础上，将HTML放到正常表单里就好了。（正常表单上面提到过）

思考

在显示和隐藏这个点子上，我给了一个小例子来展开，我的本意只是做一个启发，显示隐藏还有好多种场景需求，并不是一种方法就可以涵盖所有的需求的。这里，再提一个很常见的需求：

点击某个元素X，显示某些隐藏的内容Y，点击页面其他位置（非X、非隐藏内容Y），隐藏Y

图文配合解释下这样的需求场景就是：

点击其他位置隐藏

看着上图，需求描述是这样的：

1. 点击红框，显示绿框（默认隐藏）

2. 点击页面其他位置（非红绿框），隐藏绿框（当然，绿框内的某些元素是有交互的，这不关这个需求的事）

就是这样的，然后，只有一个要求：

不使用JS

各位可以看看怎么实现哈。欢迎评论发表解决方案哈~~

作者：VeeQun
链接：https://www.jianshu.com/p/d9f0ac1cc4c9