Question

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

我尝试使用'焦点'代替'模糊'，但这不起作用。

我尝试过'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

Answer 2

你可以在按键和鼠标点击事件中调用事件，这样一旦用户写任何东西或使用鼠标粘贴任何东西，事件就会被触发

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

的jQuery

HTML

2 个答案: