在很多的項目中,數字輸入的校驗是不可避免的,我們總是擔心用戶輸入的數據不符合我們的規則,首先我們不討論惡意用戶的行爲,對於正常的用戶,我們也希望儘量減少因爲用戶輸入帶來的意外情況,同時這也提高用戶體驗的一種有效的方式。這樣的代碼通常是樣板式的,因此我們可以考慮將其做成一個jQuery的插件以方便使用。
// 限制只能輸入數字
$.fn.onlyNum = function () {
$(this).keypress(function (event) {
var eventObj = event || e;
var keyCode = eventObj.keyCode || eventObj.which;
// valid the input value (according to the regex)
return regNum(this.value + String.fromCharCode(keyCode)+0) ;
}).focus(function () {
//禁用輸入法
this.style.imeMode = 'disabled';
});
};
/* 正則校驗 */
function regNum(number) {
if (/^[0-9]+(\.[0-9]+)?$/.test(number))
return true;
else
return false;
}
這裏通過正則校驗來確定允許輸入的格式,例中是進行數字的校驗,用戶可以輸入小數,用戶第一次輸入" . "的時候需要補齊格式才能校驗,當然只是做校驗時使用,對用戶的實際輸入是不產生影響的。
第二個綁定的功能是當輸入框聚焦的時候,不在允許使用輸入法。
$("#numdd").onlyNum();
之前還寫過對粘貼事件的處理
bind("paste", function () {
//獲取剪切板的內容
var clipboard = window.clipboardData.getData("Text");
if (/^\d+$/.test(clipboard))
return true;
else
return false;
})
但是,目前直接進行支持的只有IE,對於其他的瀏覽器可能需要做比較複雜的操作才能獲取剪切板的內容。
在IE中是對外有接口的,可以通過window.clipboardData對象得到剪貼板的內容,這樣就容易導致開發人員在後臺寫一個程序記錄用戶剪貼板的內容,這樣可以把海量的數據集中起來做數據挖掘,這個對用戶的安全來說是很可怕的,因此在訪問的時候會提示用戶是否允許訪問剪貼板的內容。
在IE意外的瀏覽器是不允許訪問剪貼板內容的,只有拒絕才是最安全的,所以在火狐等其他瀏覽器中不能通過window.clipboardData對象來訪問剪貼板的內容