我們知道在Windows控件里有一個叫NumericUpDown的控件，使用這個控件后可以用鼠標點擊或鍵盤上下鍵來微調數字，當然也可以直接輸入。這是一個使用方便同時又能限制輸入格式的很有用的控件，可惜在Web中卻沒有提供這個控件，我們只能面對幾個土土的INPUT的衍生控件。

??? 不過也有很多人制作了NumericUpDown這個控件替代品，但是由于Web上同樣沒有提供ScrollBar這個控件，那些替代品一個通病就是模擬的用來微調那兩個button始終不太和諧，而且顯示的效果受網頁字體的影響很大。最常用的就是用圖片了，那樣字體一大就完全對不上了，不是看圖片不完整，就是看半個數字，真的是很惱火。

??? 有沒有辦法借用系統的滾動條來實現NumericUpDown控件中的微調button呢？這個確實比較的難，我們最容易想到的就是使用INPUT type="text"和Select把它們弄成一行高，然后就會出現和Windows的NumericUpDown控件十分相像的微調button。那正好啊，可是問題是這兩個控件的滾動條的出現是一個系統的行為，而不是HTML元素的行為(不是指的behavior哦)，我們沒有辦法去讀取和設置這滾動條的屬性，就象使用Select，我們甚至都做出了外觀很professional的NUD控件了，可是卻完全沒有辦法使用腳本讀取和設置我們想要的數值。

??? 既然不能響應系統滾動條的任何事件，那么我們就該從別的地方想辦法了。使用viewport窗口里的onScroll事件來觸發執行，因為只要滾動條有移動，onScroll就會觸發，等于間接的俘獲了系統滾動條上的點擊事件，又因為可以通過onScroll的增量的正負來確定是Up按鈕被點擊了，還是Down按鈕被點擊了。那么使用這個特性來實現NumericUpDown控件似乎理所當然了？可是不幸還是有一些問題。

??? 假如我們使用div元素來做一個NumericUpDown控件， 0 11 1 。這個按鈕已經很professinal了，而且不會受字體大小的任何影響。那么問題是什么呢？問題是當我們使用鼠標點擊時按鈕后，onScroll事件會被觸發n(1-4)次@_@。當然使用鼠標滾輪或鍵盤上下鍵，也會觸發n次onScroll事件。這個n到底可不可以度量呢？幸好是可以的，原來它是受字體大小影響的，當字體時Smallest時，n=1；字體時Smaller時，n=2；字體時Medium、Larger和Largest時，n=3或4。

??? 那么就算我們要使用onScroll也不能這么去判斷n值呀，而且3或4的取值還不一定呢。后來又發現這些onScroll觸發時的時間都是一樣的，至少使用getTime()獲得的毫秒值是相同的。用這個timestamp來判斷也有還有問題，怎么都是問題啊，嗯，還真的都是問題。就是怎么去計數這幾個timestamp相同的onScroll的問題。這個問題解決了，那么Web上的NumericUpDown控件就將會非常的professinal了。

本文轉自博客園鳥食軒的博客，原文鏈接：http://www.cnblogs.com/birdshome/，如需轉載請自行聯系原博主。

總結

以上是生活随笔為你收集整理的用系统滚动条实现NumericUpDown的原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。