防止輸入字符的輸入型數與淘汰賽

Question

我必須阻止用戶在淘汰賽的輸入型文本中插入一個非數字值：

這裏我的HTML：

<input data-bind="value: myModel.myNumber, valueUpdate: 'afterkeydown', event: { change: validateMyNumber }" type="number" /> 

這裏的JS ：

self.validateMyNumber = function (data, event) { 
    var input = data.myModel.myNumber(); 
     if (input == "") 
     { 

     } 
}; 

我不能找到一些邏輯來validateMyNumber功能裏面寫的...當我按下按鈕，它是不是一個數字我失去了我的模型舊值，我得到一個空字符串...在th電子文本框什麼也沒有改變... 我只是想如果我插入一個非數字值我必須阻止在文本框中插入...我該怎麼辦？

Answer 1

我使用這個作爲input [type = number]元素的全局規則。你不需要任何具體的淘汰賽。

$(document).on('keypress change focus', 'input[type="number"]', function (e) { 
    var isKeypress = e.type === 'keypress'; 
    var isChange = e.type === 'change'; 
    var isFocus = e.type === 'focus' || e.type === 'focusin'; 
    var charTyped = String.fromCharCode(e.which); 
    var $el = $(this); 

    // store original value to revert change that invalidates min 
    if (isFocus) { 
     this.originalVal = $el.val(); 
     return; 
    } 

    // block invalid keystrokes 
    if (isKeypress) { 
     // don't allow non-numeric chars 
     if (!/^[\.0-9]$/.test(charTyped)) { 
      e.preventDefault(); 
      return; 
     } 

     // don't allow double periods (123.456.789) 
     if (charTyped === '.' && $el.val().indexOf('.') > -1) { 
      e.preventDefault(); 
      return; 
     } 
    } 

    // don't allow >max or <min values 
    if (isChange) { 
     var min = $el.attr('min'); 
     var max = $el.attr('max'); 
     var amt = parseInt($el.val() + charTyped); 

     if (max && amt > max || min && amt < min) { 
      // revert change 
      $el.val(this.originalVal); 
      $el.focus(); 
     } 
    } 
});