Question

我对“keyup”事件有一种奇怪的行为：当我用某些东西填写输入字段时，我删除了该值，无法识别最后一个删除键盘事件。

示例代码：

<script type="text/javascript">

    //<![CDATA[

    //Declaration of variables
    var chart;
    var data1;
    var data2;
    var data3;

    function firstFunction(data1p, data2p, data3p) {    

        $(function() {

            data1 = data1p;
            data2 = data2p;
            data3 = data3p;

            //Other operations          

        });
    }

    function secondFunction(args) {

        $(function() {

            data1 = JSON.parse(args.data1);
            data2 = JSON.parse(args.data2);
            data3 = JSON.parse(args.data3);

            //Other different operations            

        });
    }

    firstFunction(#{chart2Controller.data1}, #{chart2Controller.data2}, #{chart2Controller.data3});

    //]]>
</script>

小提琴HERE

任何解决方案或为什么会出现这种奇怪的行为？

Answer 1

只需将比较器更改为>=而不是>即可。

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

Fiddle here

Answer 2

<强> 更新

根据fiddle中描述的新问题，解决方案可以基于jQuery data：

＆＃13;

$(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));
  });
});

＆＃13;

<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>

＆＃13;

问题是：

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

这必须是：

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

段：

＆＃13;

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

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<input type="text" value="" id="input"/>
<div id="text"></div>

＆＃13;

删除时没有触发jquery的最后一个keyup事件

2 个答案: