網頁要用到數字輸入欄位我習慣用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;
      } else if (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);
      else if (data.value < data.min)
        alert("Value " + data.value + " is less than Min: " + data.min);
    });
  });

Comments

Be the first to post a comment

Post a comment