Question

我使用此代码编写了与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>

当用户点击该按钮时，浏览器会生成与“日期”类型不符合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>

Answer 1

Firefox doesn't support HTML5's。

你应该致电appendPolyfill

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

如何用JS生成与Firefox兼容的新输入类型日期？

1 个答案: