Почему возвращается неверное значение инпута?

Question

[GaserV]

Такая беда. Инпут создается динамически. При вводе в этот инпут символов нужно получить значение. Получается если я ввожу например "Е" мне выводится " ", Если ввожу "Ee", то выведется "E. То бишь без последнего символа. Почему так?

Создающийся инпут:

<input type="text" onkeydown="getCities(event)" class="form-control select-city" placeholder="Select a city"/>

Пробовал так:

function getCities(e) {
    console.log($(e.target).val())
    console.log(e.target.value)
}

И вот так:

$('body .select-city').on('keyup', '.select-city', function(e){
            console.log(e.target.value)
        })

Answer 1

[Immortal_pony]

При событии keydown вы получаете значение текстового поля до внесения в него изменений, так как ввод еще не завершен.

Для обработки события keyup вы указали неправильный селектор. Ваша конструкция предполагает, что элемент с классом .select-city будет вложен в элемент .select-city (который будет вложен в элемент body).
Исправить можно следующим образом:

$('body').on('keyup', '.select-city', function(e){
    console.log(e.target.value)
});

Пример: https://jsfiddle.net/4uqLoL0L/1/

PS В этом случае событие "onkeydown" в html уде будет лишним скорее всего.

Answer 2

[Abdula Magomedov]

В таких случаях используют событие "input". По ссылке по подробнее: learn.javascript.ru/events-change