CODEWITHSUNDEEP
jquerymodernizr
rakela
rakela

Reputation: 303

input type number in firefox with modernizr

I need to make input number supported by Firefox. I searched around and find modernizr as possible solution. How can i implement modernizr to make input numbers in firefox? I followed these instructions http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/ but, it's showing errors on 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')

Is there any simpler way to implement modernizr on Input Number element?

Thanks in advance

Upvotes: 2

Views: 2136

Answers (1)

rakela
rakela

Reputation: 303

The solution: The scripts: 

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

The html:

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

Hope this helps someone.

Upvotes: 1

Related Questions