網頁要用到數字輸入欄位我習慣用Kendo UI的NumericTextBox解決，可以設上下限，有調整鈕，還能用上下鍵調數字，該有的都有，但有個小問題－當使用者輸入值超過上下限，NumericTextBox只默默將它改成Max或Min，沒有任何提示，使用者可能沒察覺輸入數字被改掉，導致爭議。
在Telerik討論區找到相關討論，Telerik RD確認NumericTextBox目前版本不提供超出範圍事件。由於沒察覺數字被改可能造成的爭議不小（跟錢有關），專案規格提出「數字超過範圍時需提醒使用者」的需求，因此又到了天助自助，自立自強的時刻。追了原始碼，有個_adjust()函式負責檢查使用者輸入的值是否大於Max或小於Min，超過時強制改為Max及Min，我想到做法抽換掉_adjust，換成加料的版本－修改數值前先觸發自訂outOfRange事件（借用jQuery的自訂事件），傳入value、max、min參數，以便加入自訂邏輯，例如：alert顯示警告訊息等。由於不希望事件卡住原本的運作流程，故我用了setTimeout的技巧，等1ms才觸發。
程式範例以下（Demo），供有類似需要的同學參考：（註：這屬於Hacking解法，未來若Kendo UI改版有可能導致做法失效）
$(document).ready(function() {// create NumericTextBox from input HTML element $("#numeric").kendoNumericTextBox();var ntb = $("#numeric").data("kendoNumericTextBox");
//hacking, trigger event when out of range ntb._adjust = function(value) {var that = this,
options = that.options,
min = options.min,
max = options.max;
if (value === null) {
return value;}
element = this.element;var triggerEvent = function() {
var evtData = { value: value, max: max, min: min }; setTimeout(function() { element.trigger("outOfRange", evtData);}, 1);
};
if (min !== null&& value < min) {
triggerEvent();
value = min;
} elseif (max !== null&& value > max) {
triggerEvent();
value = max;
}
return value;};
$("#numeric").bind("outOfRange", function(e, data) {
if (data.value > data.max) alert("Value " + data.value + " is greater than Max: " + data.max);
elseif (data.value < data.min)
alert("Value " + data.value + " is less than Min: " + data.min);
});
});