jquery - 使用 Modernizr 在 Firefox 中输入类型编号

Question

我需要让火狐支持输入数字。我四处搜寻并找到了 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')

有没有更简单的方法在输入数字元素上实现现代化？

提前致谢

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

希望这对某人有帮助。