Modernizr的

Question

<form>
<input type="email" required>
<input type="submit" value="Submit">
</form>

在HTML5浏览器上，如果您点击“提交”而未填写任何内容，则会收到＆＃34;请填写此字段＆＃34;注意。如果您输入的是文字，但它不是有效的电子邮件，那么您将获得＆＃34;请包含＆＃39; @＆＃39;在电子邮件地址中。＆＃39;什么＆＃39;缺少＆＃39; @＆＃39;＆＃34;。

据我了解，modernizr应该通过使用javascript使这些HTML5功能在非HTML5浏览器上运行。即

<script src="modernizr.js"></script>
<form>
<input type="email" required>
<input type="submit" value="Submit">
</form>

不幸的是，它不起作用。我是否只需要重写代码而不是使用这种HTML5方法（而是使用另一种方法），或者是否有一些javascript库可以在非HTML5浏览器上神奇地模拟这个功能？

谢谢！

Answer 1

Modernizr没有向您的浏览器添加任何功能（除了html5shiv，它在旧的IE中添加了对无法识别的标记的支持，这是一个巨大的功能本身）。

Modernizr用于特征检测。它可以告诉您，您的浏览器支持或不支持电子邮件类型属性。

Polyfills

您需要的是polyfill Webshim。它能够用javascript驱动的解决方案替换一些缺少的浏览器功能。就像表单验证一样。

polyfills的一个常见功能是它们不会替换浏览器中的现有功能。它们仅在浏览器缺少该功能时激活。但是也有例外。

大多数功能都有 HUGE number of polyfills available 。 forms alone有很多。他们中的大多数都做你想做的事。

我选择了Webshim是因为我听说过作者。

它有很多配置选项，但这两个步骤应该足够了：

在您网页的任意位置添加javascript。您之前还需要包含jQuery，因为Webshim依赖它：
```
<script src="js/jquery.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
```

启动polyfill。

<script>
  webshim.polyfill('forms');
</script>

不要犹豫，询问您是否还有任何关于让它工作的问题。