使用modernizr在firefox中输入类型编号

时间:2013-06-20 12:45:14

标签: jquery modernizr

我需要输入Firefox支持的输入编号。我四处搜索并找到了modernizr作为可能的解决方案。如何实现modernizr在firefox中输入数字?我按照这些说明http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/  但是,它在firefox上显示错误:

TypeError: $.ui is undefined
[Break On This Error]   

keyCode = $.ui.keyCode,

ui.spinner.js (line 15)
TypeError: $input.spinner is not a function
[Break On This Error]   

step: $input.attr('step')

有没有更简单的方法在Input Number元素上实现modernizr?

提前致谢

1 个答案:

答案 0 :(得分:1)

解决方案: 脚本:                         

$(document).ready(function(){
        if(!Modernizr.input.placeholder){ //placeholder
                makePlaceholders();
        }//if
        if(!Modernizr.input.autofocus){ //auto focus
                $("input[autofocus]").focus();
        }//if
        if(!Modernizr.inputtypes.number){ //number spinner
                var $numerics = $("input[type=number]");
                $numerics.each(function (){
                        var thisNum = $(this);
                        thisNum.spinner({
                                min: thisNum.attr("min"),
                                max: thisNum.attr("max"),
                                step: thisNum.attr("step")
                        });
                });
        }//if
        if(!Modernizr.inputtypes.date){ //date input
                var $dates = $("input[type=date]");
                $dates.each(function (){
                        var thisDate = $(this);
                        thisDate.datepicker({
                                minDate: thisDate.attr("min"),
                                maxDate: thisDate.attr("max"),
                                dateFormat: "yy-mm-dd"
                        });
                });
        }//if
});//document.ready

function makePlaceholders(){
        $inputs = $("input[type=text],input[type=email],input[type=tel],input[type=url]");
        $inputs.each(
                function(){
                        var $this = jQuery(this);
                        this.placeholderVal = $this.attr("placeholder");
                        $this.val(this.placeholderVal);
                }
        )//each
        .bind("focus", function(){
                var $this = jQuery(this);
                var val = $.trim($this.val());
                if(val == this.placeholderVal || val == ""){
                        $this.val("");
                }//if
        })//bind
        .bind("blur", function(){
                var $this = jQuery(this);
                var val = $.trim($this.val());
                if(val == this.placeholderVal || val == ""){
                        $this.val(this.placeholderVal);
                }//if
        });//bind
}//function
 </script>

html:

<input type="number" min="6" max="30" step="1" value ="6">

希望这有助于某人。