為Kendo UI NumericTextBox加上超出範圍警示

網頁要用到數字輸入欄位我習慣用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);
    });
  });
歡迎推文分享:
Published 01 December 2015 07:25 AM 由 Jeffrey
Filed under:
Views: 4,220



意見

沒有意見

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<December 2015>
SunMonTueWedThuFriSat
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication