2016-07-21 7 views
0

У меня странное поведение с событием «keyup»: Когда я заполняю поле ввода чем-то, то я удаляю значение, последнее событие удаления ключа не распознается.Последнее событие keyup при удалении не уволено jQuery

Пример кода:

$('#input').on('keyup',function(){ 
if($(this).val().length > 0){ 
    $('#text').html($(this).val()) 
} 
}); 

Fiddle HERE

Любое решение или почему это странное поведение?

ответ

0

ОБНОВЛЕНИЕ

В соответствии с новой проблемы, описанной в fiddle решение может быть основано на jQuery data:

$(function() { 
 
    $('#input-deposit').on('keyup', function (e) { 
 
    if ($(this).val().length >= 0) { 
 
     $('#text').html($(this).val()) 
 
    } 
 
    }); 
 

 
    // set the default of previousValue 
 
    $('#input-deposit').data('previousValue', 0); 
 

 
    $('#input-deposit').on('keyup', function (e) { 
 
    var t = 2000; 
 

 
    if (!isNaN(this.value) && this.value.length != 0) { 
 
     // get the previous value 
 
     var previousValue = parseFloat($('#input-deposit').data('previousValue')); 
 
     var total = parseFloat($('#input-balance').val()); 
 
     var deposit = parseFloat($(this).val()); 
 
     $('#input-deposit').data('previousValue', deposit); 
 
     // use previousValue 
 
     t = total + previousValue - deposit; 
 
    } else { 
 
     // reset previousValue 
 
     $('#input-deposit').data('previousValue', 0); 
 
    } 
 
    $('#input-balance').val(t.toFixed(2)); 
 
    }); 
 
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<label>Deposit</label> 
 
<input type="text" value="" id="input-deposit"/> 
 
<label>Balance</label> 
 
<input type="text" value="2000" id="input-balance"/> 
 

 
<div id="text"></div>

Проблема заключается в том:

if($(this).val().length > 0){ 

Это должно быть:

if($(this).val().length >= 0){ 

Отрывок:

$(function() { 
 
    $('#input').on('keyup',function(){ 
 
    if($(this).val().length >= 0){ 
 
     $('#text').html($(this).val()) 
 
    } 
 
    }); 
 
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<input type="text" value="" id="input"/> 
 
<div id="text"></div>

+0

Я уже пробовал это. Прекрасно работает на вашей демонстрации, но я установил аналогичную демоверсию в мой код, который не работает. Демо [ЗДЕСЬ] (https://jsfiddle.net/t5onueLu/11/). – Someone33

+0

@ Someone33 Фрагмент обновлен. Дай мне знать. – gaetanoM

0

Просто измените компаратор на >= вместо > и он будет работать.

$('#input').on('keyup',function(){ 
    if($(this).val().length >= 0){ 
     $('#text').html($(this).val()) 
    } 
}); 

Fiddle here

+0

Я уже пробовал это. Прекрасно работает на вашей демонстрации, но я установил аналогичную демоверсию в мой код, который не работает. Демо [ЗДЕСЬ] (https://jsfiddle.net/t5onueLu/11/). – Someone33

+0

Это из-за вашего состояния NaN. Если в текстовом вводе нет записи, она не вводит условие, поэтому оно не обновляет поле номера. См. Здесь: https://jsfiddle.net/t5onueLu/14/ –