我试图让新的输入类型在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>
答案 0 :(得分:4)
旧版浏览器不支持HTML5输入类型与IE7-IE8
类似,会自动回退到这些浏览器支持的input type="text"
。
相关问题是here。
如果您想支持这些验证,则必须使用旧版浏览器的JavaScript验证。
您也可以尝试旧浏览器支持的h5Validate - HTML5 Form Validation for jQuery。在13种不同的浏览器上进行了测试,IE6-IE9
,FireFox
,Chrome
,iPhone
和Android
。
另一种选择是使用Modernizr。
祝你好运!