jQuery мобильная функция on.change работает только иногда

Question

У меня этот код в jsfiddle, этот код должен проверять на недопустимые числовые значения, такие как -12-12. Таким образом, ошибка возникает, если я набираю недопустимое числовое значение (например, -12-11), оно удаляет вход (который является ожидаемым поведением), а странная часть - во второй раз, когда он не вызывает функцию document.on change ,

Шаги по воспроизведению проблемы заключаются в следующем:

• Тип 12, например.

• Нажмите где-нибудь еще, как и другие текстовое поле и это число будет
  преобразуется в десятичную (12,00)

• Тип и неправильный номер, как -12-12 и нажмите где-нибудь еще и текстовое поле будет списываться из (что является ожидаемым поведением).

• Во второй раз, когда вы вводите это число в текстовое поле, оно не меняет значение или очищает текстовое поле.

  Это то, что я не понимаю, пытаясь отлаживать код во второй раз, когда вы вставляете неправильный номер, функция не вызвана, поэтому мне было интересно, почему.

Любая помощь приветствуется.

Мой Javascript код:

$(document).on('change', 'input[type="number"]', function(event) { 
    var target = $(event.target); 
    var max = target.attr('max') - 0; 
    var min = target.attr('min') - 0; 
    var step = target.attr('step'); 
    var val = parseFloat(target.val()); 
    if(typeof max !== 'undefined' && val > max) { 
     target.val(max); 
    } 
    else if(typeof min !== 'undefined' && val < min) { 
     target.val(min); 
    } 
    else if(typeof step !== 'undefined') { 
     if(step < 1) { 
      target.val(parseFloat(target.val()).toFixed(step.split('.')[1].length)); 
     } 
     else { 
      debugger; 
     } 
    } 
    else if(val + '' != target.val()) { 
     target.val(val); 
    } 
}); 

Answer 1

Я вижу проблему, и в состоянии решить. Я предлагаю вам использовать событие blur вместо change событие textbox. Это будет работать как шарм.

Вот код:

$(document).on('blur', 'input[type="number"]', function(event) { 
 
    var target = $(event.target); 
 
    var max = target.attr('max') - 0; 
 
    var min = target.attr('min') - 0; 
 
    var step = target.attr('step'); 
 
    var val = parseFloat(target.val()); 
 
    if(typeof max !== 'undefined' && val > max) { 
 
     target.val(max); 
 
    } 
 
    else if(typeof min !== 'undefined' && val < min) { 
 
     target.val(min); 
 
    } 
 
    else if(typeof step !== 'undefined') { 
 
     if(step < 1) { 
 
      target.val(parseFloat(target.val()).toFixed(step.split('.')[1].length)); 
 
     } 
 
     else { 
 
      debugger; 
 
     } 
 
    } 
 
    else if(val + '' != target.val()) { 
 
     target.val(val); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="transaction_amount">Amount</label> 
 
       <input type="number" data-mini="true" step="0.01" name="amount" min="0.01" max="1000000" id="transaction_amount" value=""> 
 
       <label for="transaction_external_identifier" id="payment-description-label">Check #</label> 
 
       <input type="text" name="external_identifier" id="transaction_external_identifier" value="" data-mini="true">

Answer 2

Когда недействительный номер вводится на вход типа номера, браузер считает, что, как пустой (потому что это недопустимый и выиграл» t держите это значение, поэтому возвращает false при запросе о действительности. According to the Mozilla Developer Network). Поэтому, если вы снова наберете -12-12, событие change не срабатывает и, следовательно, оно не очищается, поскольку базовое значение остается пустым. Вы увидите это, если сначала начнете вводить -12-12 в пустой ввод - это также не сработает.

Ваш лучший выбор - изменить onchange на onblur, так как он будет гораздо более последовательным, так как он не смотрит на значение.