jQuery .val () игнорирует первый символ ввода - PullRequest
Новая
       39

jQuery .val () игнорирует первый символ ввода

0 голосов
/ 12 января 2019

У меня есть вход и метка. Я хочу показать метку, когда пользователь вводит что-либо в поле ввода. Однако, как вы можете видеть во фрагменте (или в 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'>

Ответы [ 2 ]

0 голосов
/ 12 января 2019

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'>
0 голосов
/ 12 января 2019

Слушайте вместо input.

keydown, как следует из его названия, срабатывает до того, как ключ снят, и, что особенно важно для вас, до обновления значения.

input имеет преимущество не только в покрытии всех трех событий, которые вы в настоящее время слушаете, но также и запускает после значения обновляется, что означает, что вы получите последнее значение. 

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