javascript - 使用 jQuery 在 HTML 中实时更新输入

Question

我正在为 FPGA 板编写 HTML 界面。目前，我需要在执行“blur”下的代码之前单击输入框外的某处(也就是说，输入值被发送到 FPGA)。我想要做的是使 jQuery 中“模糊”事件中的代码在我更改输入的同时执行。

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

我尝试了 'keyup' 事件而不是 'keydown'，但在这种情况下，函数 (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 标签

Input event