使用jQuery实时更新HTML输入

Question

我正在为FPGA板编写HTML接口。 目前，在执行“模糊”下的代码之前，我需要在输入框之外的某个位置单击（即，将输入值发送到FPGA）。 我想做的是使jQuery中“ blur”事件中的代码在我更改输入的同时执行。

我尝试使用“焦点”而不是“模糊”，但这不起作用。

我尝试了'keyup'事件而不是'keydown'事件，但是在这种情况下，function（e）不起作用。

我还实现了一个'keydown'事件，以便可以使用箭头键选择和增加/减少输入数字来更新输入。

这是代码的相关部分。

jQuery的

$('#gen_ch1_ampl')
  .on('focus paste', function() {
    $(this).parent().addClass('input-group');
    $('#apply_gen_ch1_ampl').show();
  })
  .on('blur', function() {
    $('#apply_gen_ch1_ampl').hide();
    $(this).parent().removeClass('input-group');

    var val = parseLocalFloat($(this).val());
    if(! isNaN(val)) {
      params.local.gen_sig_amp_ch1 = val;
      sendParams();
    }
    else {
      $(this).val(params.local.gen_sig_amp_ch1)
    }
    user_editing = false;
  })

  .on('keydown', function(e) {
    var curPos = this.selectionStart;
    var endPos = this.selectionEnd;
    if(curPos !== endPos) {
      createSelection(this, curPos, curPos+1);
    }

    if(e.keyCode == 37){
      curPos--;
      gotCode=true;
    }
    if(e.keyCode == 39){
      curPos++;
      gotCode=true;
    }
    var before = $(this).val().substring(0,curPos);
    var after = $(this).val().substring(curPos+1);
    var cur = Number($(this).val().substring(curPos, curPos+1));


    if(curPos < $(this).val().length) {
      if(e.keyCode == 38) {
        cur++;
        if(cur > 9) cur = 0;
        $(this).val(before + '' + cur + '' + after);
        gotCode=true;
      }
      if(e.keyCode == 40) {
        cur--;
        if(cur < 0) cur = 9;
        $(this).val(before + '' + cur + '' + after);
        gotCode=true;
      }
    }
    if(!gotCode) {
      e.preventDefault();
      return false;
    }

    var field = this;
    window.setTimeout(function(){
      createSelection(field, curPos, curPos+1);
    }, 10);
  });



function createSelection(field, start, end) {
   if( field.createTextRange ) {
       var selRange = field.createTextRange();
       selRange.collapse(true);
       selRange.moveStart('character', start);
       selRange.moveEnd('character', end);
       selRange.select();
   } else if( field.setSelectionRange ) {
       field.setSelectionRange(start, end);
   } else if( field.selectionStart ) {
       field.selectionStart = start;
       field.selectionEnd = end;
   }
}

的HTML

<form class="form-horizontal" role="form" onsubmit="return false;">
  <div class="form-group">
    <label for="gen_ch1_ampl" class="col-xs-4 control-label">Amplitude:</label>
    <div class="col-xs-4 col-sm-5">
      <input type="text" autocomplete="off" class="form-control" value="0.00" id="gen_ch1_ampl">
    </div>
    <div style="padding: 7px 0 0;" class="col-xs-2" id="gen_ch1_ampl_units">Vpp</div>
  </div>
</form>

谢谢！

Answer 1

有一个美丽的事件'input' 。 每次更改输入字段时都会触发该事件。 也可以在textarea标签上使用

输入事件

Answer 2

您可以在按键和鼠标单击事件时调用该事件，以便一旦用户使用鼠标写任何东西或粘贴任何东西，该事件就会被触发