предотвращение ввода символа числа ввода типа с нокаутом

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 ... когда я нажимаю кнопку, то это не число, которое я потерял старое значение в моей модели, и я получаю пустую строку ... в e textBox ничего не меняется ... Я просто хочу, чтобы, если я вставляю нечисловое значение, я должен заблокировать вставку в текстовом поле ... Как я могу это сделать?

Answer 1

Я использую это как глобальное правило для ввода элементов [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(); 
     } 
    } 
});