获取新输入类型以在旧浏览器中工作

时间:2014-09-20 10:04:23

标签: html5 cross-browser

我试图让新的输入类型在IE9 IE8 IE7中运行,但非常失败。

有人知道如何完成这项工作吗?

我使用datetime-polyfill,week-polyfill和webshim lib为新浏览器工作但我不明白为什么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>

1 个答案:

答案 0 :(得分:4)

旧版浏览器不支持HTML5输入类型与IE7-IE8类似,会自动回退到这些浏览器支持的input type="text"

相关问题是here

如果您想支持这些验证,则必须使用旧版浏览器的JavaScript验证。

您也可以尝试旧浏览器支持的h5Validate - HTML5 Form Validation for jQuery。在13种不同的浏览器上进行了测试,IE6-IE9FireFoxChromeiPhoneAndroid

另一种选择是使用Modernizr

祝你好运!