如何使用与Firefox兼容的JS生成新的输入类型日期?(How to generate a new input type date with JS which are compatible with Firefox?)
我使用此代码编写了与Firefox兼容的代码
<!-- cdn for modernizr, if you haven't included it already --> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script> <!-- polyfiller file to detect and load polyfills --> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script> <script> webshims.setOptions('waitReady', false); webshims.setOptions('forms-ext', {types: 'date'}); webshims.polyfill('forms forms-ext'); </script> <div class="col-sm-6 dailydate" id="daily"> <p class="contact-form-daily"> <label for="typeofservice-dailydate" class="sr-only">daily<span>*</span></label> <input type="date" aria-required="false" size="30" value="" name="daily-date-#1" id="typeofservice-dailydate" class="form-control" placeholder="daily date"> </p> </div>但是我添加了下面的代码,每当用户点击按钮时添加新的输入类型=“日期”。
<span id="responce"></span> <button class="col-sm-6 btn btn-primary theme_button margin_0 color1" id="add- button" onclick="addDate()">Add another Date</button> <script> var countBox =2; var boxName = 0; function addDate() { var boxName=countBox; document.getElementById('responce').innerHTML+='<div class="col-sm-6"><p class="contact-form-daily"><label for="typeofservice-dailydate-'+boxName+'" class="sr-only">daily<span>*</span></label><input type="date" class="form-control" aria-required="false" size="30" id="typeofservice-dailydate-'+boxName+'" value="" name="daily-date-#'+boxName+'" placeholder="Type another date" /> '; countBox += 1; } </script>当用户点击该按钮时,浏览器会生成新类型为“Date”的盒子,这些盒子与Firefox不兼容。 我该如何解决这个问题?
webshims.setOptions('waitReady', false); webshims.setOptions('forms-ext', {types: 'date'}); webshims.polyfill('forms forms-ext'); var countBox =2; var boxName = 0; function addDate() { var boxName=countBox; document.getElementById('responce').innerHTML+='<div class="col-sm-6"><p class="contact-form-daily"><label for="typeofservice-dailydate-'+boxName+'" class="sr-only">daily<span>*</span></label><input type="date" class="form-control" aria-required="false" size="30" id="typeofservice-dailydate-'+boxName+'" value="" name="daily-date-#'+boxName+'" placeholder="Type another date" /> '; countBox += 1; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- cdn for modernizr, if you haven't included it already --> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script> <!-- polyfiller file to detect and load polyfills --> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script> <div class="col-sm-6 dailydate" id="daily"> <p class="contact-form-daily"> <label for="typeofservice-dailydate" class="sr-only">daily<span>*</span></label> <input type="date" aria-required="false" size="30" value="" name="daily-date-#1" id="typeofservice-dailydate" class="form-control" placeholder="daily date"> </p> </div> <span id="responce"></span> <button class="col-sm-6 btn btn-primary theme_button margin_0 color1" id="add-button" onclick="addDate()">Add another Date</button>I wrote a code that are compatible with Firefox by using this code
<!-- cdn for modernizr, if you haven't included it already --> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script> <!-- polyfiller file to detect and load polyfills --> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script> <script> webshims.setOptions('waitReady', false); webshims.setOptions('forms-ext', {types: 'date'}); webshims.polyfill('forms forms-ext'); </script> <div class="col-sm-6 dailydate" id="daily"> <p class="contact-form-daily"> <label for="typeofservice-dailydate" class="sr-only">daily<span>*</span></label> <input type="date" aria-required="false" size="30" value="" name="daily-date-#1" id="typeofservice-dailydate" class="form-control" placeholder="daily date"> </p> </div>but I’ve added the code below to add new input type="date" each time the users click on the button.
<span id="responce"></span> <button class="col-sm-6 btn btn-primary theme_button margin_0 color1" id="add- button" onclick="addDate()">Add another Date</button> <script> var countBox =2; var boxName = 0; function addDate() { var boxName=countBox; document.getElementById('responce').innerHTML+='<div class="col-sm-6"><p class="contact-form-daily"><label for="typeofservice-dailydate-'+boxName+'" class="sr-only">daily<span>*</span></label><input type="date" class="form-control" aria-required="false" size="30" id="typeofservice-dailydate-'+boxName+'" value="" name="daily-date-#'+boxName+'" placeholder="Type another date" /> '; countBox += 1; } </script>The problem when the user click on that button, the browser generates new boxes that are type of ‘Date’ which are non-compliant with Firefox. How can I solve this issue???
webshims.setOptions('waitReady', false); webshims.setOptions('forms-ext', {types: 'date'}); webshims.polyfill('forms forms-ext'); var countBox =2; var boxName = 0; function addDate() { var boxName=countBox; document.getElementById('responce').innerHTML+='<div class="col-sm-6"><p class="contact-form-daily"><label for="typeofservice-dailydate-'+boxName+'" class="sr-only">daily<span>*</span></label><input type="date" class="form-control" aria-required="false" size="30" id="typeofservice-dailydate-'+boxName+'" value="" name="daily-date-#'+boxName+'" placeholder="Type another date" /> '; countBox += 1; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- cdn for modernizr, if you haven't included it already --> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script> <!-- polyfiller file to detect and load polyfills --> <script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script> <div class="col-sm-6 dailydate" id="daily"> <p class="contact-form-daily"> <label for="typeofservice-dailydate" class="sr-only">daily<span>*</span></label> <input type="date" aria-required="false" size="30" value="" name="daily-date-#1" id="typeofservice-dailydate" class="form-control" placeholder="daily date"> </p> </div> <span id="responce"></span> <button class="col-sm-6 btn btn-primary theme_button margin_0 color1" id="add-button" onclick="addDate()">Add another Date</button>最满意答案
Firefox 目前还不支持HTML5 。
你应该调用appendPolyfill
webshims.setOptions('waitReady', false); webshims.setOptions('forms-ext', {types: 'date'}); webshims.polyfill('forms forms-ext'); var countBox = 1; function addDate() { //$('#responce').appendPolyfill('<fieldset><input type="date" /></fieldset>'); $('#responce').appendPolyfill('<div class="col-sm-6 dailydate" id="daily"><p class="contact-form-daily"><label for="typeofservice-dailydate'+countBox+'" class="sr-only">daily<span>*</span></label><input type="date" aria-required="false" size="30" value="" name="daily-date-#'+countBox+'" id="typeofservice-dailydate'+countBox+'" class="form-control" placeholder="daily date"></p></div>'); countBox += 1; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- cdn for modernizr, if you haven't included it already --> <script src="https://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script> <!-- polyfiller file to detect and load polyfills --> <script src="https://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script> <div class="col-sm-6 dailydate" id="daily"> <p class="contact-form-daily"> <label for="typeofservice-dailydate" class="sr-only">daily<span>*</span></label> <input type="date" aria-required="false" size="30" value="" name="daily-date-#1" id="typeofservice-dailydate" class="form-control" placeholder="daily date"> </p> </div> <span id="responce"></span> <button class="col-sm-6 btn btn-primary theme_button margin_0 color1" id="add-button" onclick="addDate()">Add another Date</button>Firefox doesn't support HTML5's yet.
you should call appendPolyfill
webshims.setOptions('waitReady', false); webshims.setOptions('forms-ext', {types: 'date'}); webshims.polyfill('forms forms-ext'); var countBox = 1; function addDate() { //$('#responce').appendPolyfill('<fieldset><input type="date" /></fieldset>'); $('#responce').appendPolyfill('<div class="col-sm-6 dailydate" id="daily"><p class="contact-form-daily"><label for="typeofservice-dailydate'+countBox+'" class="sr-only">daily<span>*</span></label><input type="date" aria-required="false" size="30" value="" name="daily-date-#'+countBox+'" id="typeofservice-dailydate'+countBox+'" class="form-control" placeholder="daily date"></p></div>'); countBox += 1; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- cdn for modernizr, if you haven't included it already --> <script src="https://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script> <!-- polyfiller file to detect and load polyfills --> <script src="https://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script> <div class="col-sm-6 dailydate" id="daily"> <p class="contact-form-daily"> <label for="typeofservice-dailydate" class="sr-only">daily<span>*</span></label> <input type="date" aria-required="false" size="30" value="" name="daily-date-#1" id="typeofservice-dailydate" class="form-control" placeholder="daily date"> </p> </div> <span id="responce"></span> <button class="col-sm-6 btn btn-primary theme_button margin_0 color1" id="add-button" onclick="addDate()">Add another Date</button>
更多推荐
class,id,script>,电脑培训,计算机培训,IT培训"/> <meta name="descripti
发布评论