让新的输入类型在旧浏览器中工作答案

【问题标题】：Getting new input types to work in old browsers让新的输入类型在旧浏览器中工作
【发布时间】：2015-12-24 17:40:01
【问题描述】：

我正在尝试让新的输入类型在 IE9 IE8 IE7 中工作，但非常不成功。

有人知道怎么做吗？

我使用 datetime-polyfill、week-polyfill 和 webshim 库使它适用于新浏览器，但我不明白为什么 webshim 不适用于 IE9 8 7。我的意思是一切都很好，直到我更改为 IE9 和我的范围输入变成了一个普通的文本字段，数字输入也是如此。

我在想 webshim 会用一些幻灯片小部件来代替缺乏支持，但什么也没有。我错过了什么请帮忙？

这是我的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Support of new input types in old browsers</title>
    <link href="inputs.css" rel="stylesheet" />
    <link href="jQuery/jquery-ui.min.css" rel="stylesheet" />
    <link href="jQuery/theme.css" rel="stylesheet" />
    <link href="datetime-polyfill.css" rel="stylesheet" />
    <link href="week-polyfill.css" rel="stylesheet" />
    <script src="jQuery/jquery-1.11.1.min.js"></script>
    <script src="jQuery/jquery-ui.js"></script>
    <script src="modernizr/modernizr.dev.js"></script>
    <script src="datetime-polyfill.js"></script>
    <script src="js-webshim/polyfiller.js"></script>
    <script>
        $.webshims.polyfill();
    </script>
    <script src="week-polyfill.min.js"></script>
</head>
<body>
    <form>
        <article id="first">
            <strong>input type"range"</strong><input type="range" name="rangeInput" value="" min="0" max="100" step="10" />
        </article>
        <article>
            <strong>input type"number"</strong><input type="number" placeholder="0.5-10" min="0.5" max="10" step="0.5" />
        </article>
        <article>
            <strong>input type"email"</strong><input type="email" placeholder="email@where.domain"  />
        </article>
        <article>
            <strong>input type"color"</strong><input type="color" placeholder="your-default-color" value="#ff0000" />
        </article>
        <article>
            <strong>input type"date"</strong><input type="date" placeholder="mm/dd/yyyy" />
        </article>
        <article>
            <strong>input type"time"</strong><input type="time" placeholder="hh:mm AM/PM" />
        </article>
        <article>
            <strong>input type"datetime"</strong><input type="datetime" placeholder="date & time" />
        </article>
        <article>
            <strong>input type"month"</strong><input type="month" placeholder="e.g. Jan 2014" />
        </article>
        <article>
            <strong>input type"week"</strong><input type="week" placeholder="e.g. Week 38, 2014" />
        </article>
        <article>
            <strong>input type"search"</strong><input type="search" placeholder="search" />
        </article>
        <article>
            <strong>input type"tel"</strong><input type="tel" placeholder="+xxx(xxx)xxxxxx" pattern="[\+]\d{3}[\(]\d{3}[\)]\d{6}" />
        </article>
        <article>
            <strong>input type"url"</strong><input type="url" placeholder="a valid url(http://)" />
        </article>
        <article id="last">
            <input type="submit" value="submit" />
        </article>
    </form>
</body>
</html>

【问题讨论】：

您是否打开浏览器控制台并查看是否有消息/错误？
是的，有两个错误首先是：IE浏览器模式在IE10+中被破坏。确保在边缘模式下运行 IE（X-UA 兼容）。请使用真正的 IE 版本或至少 IETester 或类似工具测试您的 HTML/CSS/JS，其次是：使用 [type="color"] 而不将其添加到类型配置中。
好吧，这应该是答案。在真正的 IE 中测试，它会工作。
谢谢这真的是我的回答。我在 IETester 上尝试过，它在 IE8 和 IE9 上工作，但在 IE7 上仍然没有。再次感谢你，我仍然会在 IE7 上寻找解决方案...
webshim 1.12+ 不再支持 IE7。如果你想支持 IE7，你可以使用 1.11.6 版本（github.com/aFarkas/webshim/archive/1.11.6.zip）。但为什么？没有人再使用这个浏览器了。

标签： html cross-browser

【解决方案1】：

旧版浏览器不支持 HTML5 输入类型，例如 IE7-IE8，并自动回退到这些浏览器支持的 input type="text"。

一个相关的问题是here。

如果您想支持这些验证，您必须对旧浏览器使用 JavaScript 验证。

您可以尝试h5Validate - HTML5 Form Validation for jQuery，它在旧版浏览器中也受支持。在 13 种不同的浏览器上进行了测试，IE6-IE9、FireFox、Chrome、iPhone 和 Android。

另一种选择是使用Modernizr。

祝你好运！

【讨论】：