Как я могу подключиться к истинному событию OnChanged для текстового поля HTML (текстовый тип ввода)?

У меня есть следующий jQuery с намерением заменить предупреждение пользовательским кодом проверки для того, что было введено в текстовое поле:

$(document).on("change", '[id$=txtbxSSNOrITIN]', function () {
    alert('the textbox change event occurred');
});

Однако событие срабатывает/предупреждение отображается только тогда, когда «текстовое поле» теряет фокус. Ввод значения не вызывает событие; только выход из элемента управления/элемента запускает событие.

Должен ли я использовать другое событие (кроме «изменения») или как я могу фиксировать каждое изменение содержимого?

Я не хочу, чтобы пользователь ввел «Warble P. McGokle», а затем, только после того, как он выйдет из табуляции или щелкнет в другом месте, сообщите ему/ей/ему, что введенное значение недействительно. Это верный способ поместить мою фотографию в центр мишени для дротиков компании.

ОБНОВИТЬ

В jsfiddle у меня работал скрипт tymeJV; на самом деле, я изменил его на:

$(document).on("input", "textarea", function() {
    alert('you entered ' + this.value);
});

... но это не работает для меня (в моем проекте/веб-части):

$(document).on("input", '[id$=txtbxSSNOrITIN]', function () {
    alert('the textbox input event occurred');
});

(Я не вижу предупреждений при вводе значений в текстовый элемент)

Для контекста/полного раскрытия вот весь мой jQuery (в конце моего файла *.ascs):

<script type="text/javascript">
$(document).ready(function () {
    console.log('The ready function has been reached'); /* This is a "sanity check" so it can be verified that this jQuery script 

is running/ran */
});

/* When "Employee" checkbox changes state, set up txtbxSSNOrITIN accordingly */
$(document).on("change", '[id$=ckbxEmp]', function () {
    var ssnmaxlen = 4;
    var itinmaxlen = 12;
    var ssntextboxwidth = 40;
    var itintextboxwidth = 100;
    var ckd = this.checked;
    var $input = $('[id$=txtbxSSNOrITIN]');
    var $lbl = $('[id$=lblSSNOrITIN]');

    if (ckd) $input.data("oldValue", $input.val()); // Remember current value

    $input.prop("maxlength", ckd ? ssnmaxlen : itinmaxlen).css({
        background: ckd ? 'yellow' : 'lightgreen',
        width: ckd ? ssntextboxwidth : itintextboxwidth
    }).val(function (i, v) {
        /* If checked, trim textbox contents to ssnmaxlen characters */
        return ckd && v.length > ssnmaxlen ? v.slice(0, ssnmaxlen) : $input.data("oldValue");
    });

    $lbl.text(ckd ? "SSN - last 4 digits" : "ITIN");
    /* This sets focus to the end of the textbox (multiplication by 2 is because some characters are counted as two) */
    var strLength = $input.val().length * 2;
    $input.focus();
    $input[0].setSelectionRange(strLength, strLength);
});

$(document).on("input", '[id$=txtbxSSNOrITIN]', function () {
    alert('the textbox input event occurred');
});
</script>

Однако изменение события с «input» на «keyup» работает просто отлично, поэтому комбинация сценария tymeJV и различных предложений из комментариев творила чудеса. Измените свой ответ на «keyup», и я отмечу его как правильный.


person B. Clay Shannon    schedule 04.06.2015    source источник
comment
попробуйте событие нажатия клавиши/клавиши $(document).on(keyup, '[id$=txtbxSSNOrITIN]', function () {   -  person DarkMakukudo    schedule 04.06.2015
comment
используйте нажатие клавиши, а затем проверьте изменения в вашей проверке   -  person Spencer May    schedule 04.06.2015
comment
В любом случае, как вы можете сказать пользователю, является ли значение, которое он вводит, допустимым или нет, если он даже не закончил вводить значение?   -  person Mr Lister    schedule 04.06.2015
comment
@MrLister: я ожидаю, что событие изменения сработает после изменения содержимого. Я попробую ключ.   -  person B. Clay Shannon    schedule 04.06.2015


Ответы (1)


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

$(document).on("input", '[id$=txtbxSSNOrITIN]', function () {

Демонстрация: http://jsfiddle.net/u9a9fvdo/

person tymeJV    schedule 04.06.2015
comment
Я понятия не имел об этом событии... Я даже не знал, что oninput было событием javascript, спасибо! - person Spencer May; 04.06.2015
comment
Для тех, кому нужна дополнительная информация о событии oninput developer.mozilla. org/en-US/docs/Web/API/GlobalEventHandlers/ - person Populus; 04.06.2015
comment
У меня не сработало (в реальной жизни); пожалуйста, посмотрите мое обновление. - person B. Clay Shannon; 04.06.2015
comment
@B.ClayShannon - ваш обработчик input находится за пределами вашей функции готовности DOM. - person tymeJV; 04.06.2015
comment
Так же как и событие my change для флажка, и оно работает; так же как и событие keyup для текстового элемента, и оно работает - есть ли преимущество в том, чтобы поместить его/эти внутри функции ready-freddy? - person B. Clay Shannon; 04.06.2015
comment
@B.ClayShannon - Ну, он запускается, когда DOM полностью загружен, но если ваш script находится внизу страницы, это не имеет большого значения. Вы уверены, что селектор правильный? - person tymeJV; 04.06.2015