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');
})