jQuery .val() 忽略输入的第一个字符

Question

我有一个输入和一个标签。当用户在输入框中键入任何内容时，我想显示标签。但是，正如您在代码片段（或 jsFiddle 上）所见，您在输入框中键入的第一个字符将被忽略，您需要键入另一个字符才能使值不为空。

$('input').on('change paste keydown', function(event) {
    var inputID = event.target.id;
    var value = $('#' + inputID).val();
    $('#' + inputID + 'Label').css('visibility', 'visible');   

    if (value == ''){
        $('#' + inputID + 'Label').css('visibility', 'hidden');
    }
})

#input1Label { visibility: hidden; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id='input1Label'>Label</label>
<input id='input1'>

Answer 1

改为收听 input。

keydown，顾名思义，在解除键之前触发，对您来说至关重要的是，在更新值之前触发。

input 不仅有覆盖您当前正在侦听的所有三个事件的好处，而且还会在值更新后触发，这意味着您会得到最新的值。

$('input').on('input', event => {
    let inputID = event.target.id;
    $('#'+inputID+'Label').css('visibility', $('#'+inputID).val() ? 'visibile' : 'hidden');
})

Answer 2

keydown 在 input 的值更改之前触发，这就是为什么您第一次得到空的 value。

应该改成keyup事件，松开按键后触发

$('input').on('change paste keyup', function(event) {
  var inputID = event.target.id;
  var value = $('#' + inputID).val();
  $('#' + inputID + 'Label').css('visibility', 'visible');

  if (value == '') {
    $('#' + inputID + 'Label').css('visibility', 'hidden');
  }
})

#input1Label {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id='input1Label'>Label</label>
<input id='input1'>

jQuery .val() 忽略输入的第一个字符

jQuery .val() ignoring first character of input

jquery

input

event-listener

addeventlistener