現代化的Firefox中的輸入類型號碼

我需要使Firefox支持的輸入號碼。我搜索了四周，並找到modernizr作爲可能的解決方案。我如何實現modernizr在Firefox中輸入數字？我跟着這些指示http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/ 但是，它顯示在Firefox錯誤：現代化的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')

有沒有更簡單的實現輸入號元素Modernizr的方法是什麼？

在此先感謝

來源

2013-06-20 rakela

您是否包含了所有需要的庫？ – epascarello

'$ .ui'是jQuery UI的命名空間。即使在你的教程中，它說，*爲了給其他瀏覽器提供回退，我們將使用jQuery UI的滑塊小部件。*您需要包含它。 – Ohgodwhy

我沒有包含jquery ui。我發現這個[http://forrst.com/posts/HTML5_Forms_Code-sjI](http://forrst.com/posts/HTML5_Forms_Code-sjI），它的功能，除了CSS，我想我應該包括。謝謝 – rakela

解決方案：腳本：

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

希望這可以幫助別人。

來源

2013-06-20 13:00:15 rakela

現代化的Firefox中的輸入類型號碼

回答

相關問題