獲取新的輸入類型在舊版瀏覽器中工作

我想獲得新的輸入類型在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 protected]" /> 
     </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>

來源

2014-09-20 Georgi Markov

你打開瀏覽器控制檯，看起來有消息/錯誤嗎？ – 2014-09-20 17:38:58

是的，首先有2個錯誤是：IE瀏覽器模式在IE10 +中被搗毀。確保在邊緣模式下運行IE（X-UA兼容）。請使用真正的IE版本或者至少IETester或類似的工具來測試您的HTML/CSS/JS，其次是：[type =「color」]，而不用將其添加到類型配置中。 – 2014-09-22 09:36:39

好的，比這應該是答案。在真正的IE測試，它會工作。 – 2014-09-22 15:12:25

HTML5輸入類型不是在舊的瀏覽器就像IE7-IE8支持和自動退回到在這些瀏覽器都支持input type="text"。

相關問題是here。

如果您想支持這些驗證，您必須對舊版瀏覽器進行JavaScript驗證。

您也可以嘗試h5Validate - HTML5 Form Validation for jQuery，這在舊版瀏覽器中也是如此。測試了13種不同的瀏覽器：IE6-IE9,FireFox,Chrome,iPhone和Android。

另一種選擇是使用Modernizr。

祝你好運！

來源

2014-09-20 10:25:55

獲取新的輸入類型在舊版瀏覽器中工作

回答

相關問題