number輸入框 · 致力于web前端技術撰寫

有時我們需要實現一個有最大值和最小值的輸入問題，當然也許還涉及到step步長的問題，最近的項目中就有這樣的一個需求，雖然步長是1，類似這樣的需求有很多中實現方式，譬如模擬一個拖動條，使得其值限制在最大和最小值之間，此外還可以通過input[type = ‘text’]的輸入框加入span標簽去實現。 but，我們有html5呀，我看到這個問題，第一個想法就是input[type = “number”]，設置Min和Max值。很完美，對吧？就在這時，問題出現了，首先默認的樣式很丑，我想要調整一下，但是呢，改變了一下輸入框的寬高，額，那樣式簡直是不能看啊！！！而且這還僅僅只是火狐和谷歌，IE我直接都沒看。于是去百度各種方法，發現，問關于Number輸入框的大多竟然是去掉上下小箭頭，當成一個只能輸入數字的控件來使用的。當然啦，最后我還是找到了自己想要的東西，不過呢，number輸入框雖然點擊上下小箭頭，是能很好的控制輸入范圍，但是如果用戶不適用箭頭，而選擇輸入數字的話，即使超出了范圍，它依舊是蠢蠢的接受。這實在是傻的可以！！！于是繼續think，究竟是利用keyup事件，每次鍵盤彈起的時候都去判下輸入框的值有沒有超出范圍，增加樣式和提示信息，可是總覺得不太好，然后想通過設置編輯屬性，只讀屬性，disabled等等，都不合適。后來靈光一現，就get到了一個很好的方法，簡直是激動啊，雖然并不難，但是能想到還是要給自己點贊，有時候我們需要換個思路。實現的方式很簡單，當input框獲得焦點的時候，就直接讓他失去焦點，這樣用戶就不能輸入啦，只能通過點擊上下小箭頭啦，被自己機智到了。 OK，廢話了這么多，貼上自己的代碼。可以直接下下去查看喲。部分的代碼來自網絡。不過項目緊急，實在是很難自己去實現每一個效果。需要使用modernizr-2.6.2.min.js，包含在頭部（下載地址：[http://cdn.bootcss.com/modernizr/2.6.2/modernizr.min.js](http://cdn.bootcss.com/modernizr/2.6.2/modernizr.min.js)）自己復制保存一下，or找自己下載。另外一個用到的是jquery-1.9.1.min.js. 圖片一張![這里寫圖片描述](https://box.kancloud.cn/2016-04-07_570603f1b1663.jpg "") ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="js/modernizr-2.6.2.min.js"></script> </head> <style> .numberControlBox{ display:inline-block; height:26px; overflow:hidden; vertical-align: middle; margin-left:-26px; } .ncb_up,.ncb_down{ font-size:0px; display:block; height:10px; background-color:#f4f4f4; background:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(230,230,230) 50%,rgb(255,255,255) 100%); width:24px; border:1px solid #d1d1d1; cursor:pointer; } .ncb_up{ margin-bottom:1px; } .numberControlBox .ncb_ico{ display:block; height:10px; background-image:url(arrow.png);background-repeat:no-repeat; } .ncb_up .ncb_ico{ background-position: -22px center; } .ncb_down .ncb_ico{ background-position: 1px center; } .ncb_btn_hover{ border:1px solid #9dc7e7; background-color:#dff2fc; background:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(210,237,250) 50%,rgb(255,255,255) 100%); } .ncb_btn_selected{ border:1px solid #6198c2; background-color:#aee1fb; background:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(174,225,251) 50%,rgb(255,255,255) 100%); } </style> <body> <input type="number" step="1" style = "height:30px;width:100px;" /> </body> </html> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script> jQuery.fn.numbertype = function(){ var numberFlag = null, timeInterval = 180, isKeyPress = false, changeAction = function(step, numberText){ var value = numberText.value, maxNum = jQuery(numberText).attr('max') * 1, minNum = jQuery(numberText).attr('min') * 1, result = 0; if(value === "" || !/^\d+$/.test(value)){ value = 0; } result = value * 1 + step; if((step < 0 && result < minNum) || (step > 0 && result > maxNum)){ clearTimeout(numberFlag); return; } numberText.value = result; if(timeInterval <= 10){ timeInterval = 10; }else{ timeInterval -= 10; } numberFlag = setTimeout(function(){changeAction(step, numberText)}, timeInterval); }, upAction = function(numberText, currentObj){ var step = jQuery(numberText).attr('step'); if(step === undefined || !/^\d+$/.test(step)){ step = 1; } step *= 1; if(currentObj !== undefined){ jQuery(currentObj).addClass('ncb_btn_selected'); } timeInterval = 180; changeAction(step, numberText); }, downAction = function(numberText, currentObj){ var step = jQuery(numberText).attr('step'); if(step === undefined || !/^\d+$/.test(step)){ step = 1; } step *= -1; if(currentObj !== undefined){ jQuery(currentObj).addClass('ncb_btn_selected'); } timeInterval = 180; changeAction(step, numberText); }, construct = function(height, numberText){ var numberControlBox = document.createElement('span'), upBtn = document.createElement('span'), ico_up = document.createElement('span'), ico_down = document.createElement('span'), downBtn = document.createElement('span'); numberControlBox.className = "numberControlBox"; numberControlBox.style.height = height + "px"; upBtn.className = "ncb_up"; upBtn.style.height = Math.floor(height/2 - 3) + "px"; downBtn.className = "ncb_down"; downBtn.style.height = Math.floor(height/2 - 3) + "px"; ico_up.className = "ncb_ico"; ico_down.className = "ncb_ico"; ico_up.style.height = Math.floor(height/2 - 3) + "px"; ico_down.style.height = Math.floor(height/2 - 3) + "px"; upBtn.appendChild(ico_up); downBtn.appendChild(ico_down); numberControlBox.appendChild(upBtn); numberControlBox.appendChild(downBtn); jQuery(upBtn).mousedown(function(){ upAction(numberText, this); }).mouseenter(function(){ jQuery(this).addClass('ncb_btn_hover'); }).mouseleave(function(){ jQuery(this).removeClass('ncb_btn_hover'); clearTimeout(numberFlag); }).mouseup(function(){ jQuery(this).removeClass('ncb_btn_selected'); clearTimeout(numberFlag); }); jQuery(downBtn).mousedown(function(){ downAction(numberText, this); }).mouseenter(function(){ jQuery(this).addClass('ncb_btn_hover'); }).mouseleave(function(){ jQuery(this).removeClass('ncb_btn_hover'); clearTimeout(numberFlag); }).mouseup(function(){ jQuery(this).removeClass('ncb_btn_selected'); clearTimeout(numberFlag); }); jQuery(numberText).keydown(function(event){ var keycode = event.keyCode; if(isKeyPress){ return false; } if(keycode === 38){ upAction(numberText); }else if(keycode === 40){ downAction(numberText); } isKeyPress = true; }).keyup(function(){ clearTimeout(numberFlag); isKeyPress = false; }); return numberControlBox; }; this.each(function(index){ var numberText = jQuery(this); jQuery(construct(numberText.outerHeight(), this)).insertAfter(numberText); }); jQuery(document).mouseup(function(){ jQuery('.ncb_up').removeClass('ncb_btn_selected'); jQuery('.ncb_down').removeClass('ncb_btn_selected'); }); return this; }; (function(){ if(!Modernizr.inputtypes.number){ jQuery('input[type=number]').numbertype(); } })(); var defa = {"min":1, "max":15, "value": 3} $('input[type=number]').attr({"min":defa.min,"max":defa.max, "value":defa.value}) $('input[type=number]').focus(function(){ $(this).blur(); }) </script> ~~~ 關于min,max和默認的value值沒有在input標簽中寫的原因是因為這是后臺管理系統中可以設置的值，因為要用戶交互。順便附上去掉number上下箭頭的方法： ~~~ <style> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; } input[type="number"]{-moz-appearance:textfield;} </style> ~~~ ![這里寫圖片描述](https://box.kancloud.cn/2016-04-07_570603f1c186f.jpg "") 只能通過點擊上下按鈕去改變輸入框值的大小，并且調整input框的寬高也是很完美噠···· OK，我繼續寫其他代碼了！！！