HTML5输入类型日历,颜色和范围

时间:2012-09-17 14:06:53

标签: html5 internet-explorer firefox

在开发我的网站时,我遇到了一些关于Firefox和Internet Explorer等浏览器兼容性的问题。

此外,我的代码位于我的文档的头部:

   <!-- HTML5 Shim -->
        <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->     
        <!-- Modernizr -->
        <script src="modernizr.js"></script>
        <!-- Webforms2 -->

        <!-- jQuery  -->
        <script src="js/jquery-1.4.3.min.js"></script>
        <script src="js/jquery-ui-1.8.5.min.js"></script>
        <!-- jQuery Color Picker -->
        <link rel="stylesheet" href="colorpicker.css">
        <script src="colorpicker.js"></script>
        <!-- jQuery Numeric Spinner -->
        <script src="spinner.js"></script>  
            <!-- jQuery Placehol 
            <script src="jquery.placehold-0.2.min.js"></script>  -->

在我的页面正文中:

 <!-- Script DATE  -->
    <script>
    var initDatepicker = function() {  
    $('input[type=date]').each(function() {  
        var $input = $(this);  
        $input.datepicker({  
            minDate: $input.attr('min'),  
            maxDate: $input.attr('max'),  
            dateFormat: 'dd/mm/yy'  
        });  
    });  
};  

if(!Modernizr.inputtypes.date){  
    $(document).ready(initDatepicker);  
};  
  </script>

  <!-- Script COLOR  -->
  <script>
  var initColorpicker = function() {  
    $('input[type=color]').each(function() {  
        var $input = $(this);  
        $input.ColorPicker({  
            onSubmit: function(hsb, hex, rgb, el) {  
                $(el).val(hex);  
                $(el).ColorPickerHide();  
            }  
        });  
    });  
};  

if(!Modernizr.inputtypes.color){  
    $(document).ready(initColorpicker);  
};  
  </script>


<!-- Script Slider -->
<script>
var initSlider = function() {  
    $('input[type=range]').each(function() {  
        var $input = $(this);  
        var $slider = $('<div id="' + $input.attr('id') + '" class="' + $input.attr('class') + '"></div>');  
        var step = $input.attr('step');  

        $input.after($slider).hide();  

        $slider.slider({  
            min: $input.attr('min'),  
            max: $input.attr('max'),  
            step: $input.attr('step'),  
            change: function(e, ui) {  
                $(this).val(ui.value);  
            }  
        });  
    });  
};
</script>

我遇到的问题与PHP页面有关,因为当我在index.php上时,一切正常。

当我继续index.php?p=som_page时,无论p上的论点是什么,脚本都不再起作用。

我有点迷失,因为在页面上我只包含没有头部的功能而且没有身体只包含所包含的div。

但是当我转回index.php时,一切正常。

这个问题只有在我使用Firefox或Internet Explorer时才会出现问题。当我使用Chrome时,所有输入类型的日期,颜色或范围都可以正常工作。

1 个答案:

答案 0 :(得分:0)

目前,IE,Firefox或Safari不支持<input type="color" name="favcolor">http://www.w3schools.com/html/html5_form_input_types.asp