How can I hook into a true "OnChanged" event for an HTML Textbox (Input type Text)?

Question

I have the following jQuery, with the intent of replacing the alert with custom validation code for what has been entered in the textbox:

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

However, the event fires/the alert is seen only when the "textbox" loses focus. Entering a value does not invoke the event; only leaving the control/element fires the event.

Should I be using another event (other than "change") or how can I capture each change of content?

I don't want to let the user type in "Warble P. McGokle" and then, only after they tab out or click elsewhere, tell him/her/it that the value entered is invalid. That's a surefire way to get my mugshot plastered onto the center of the company dartboard.

UPDATE

In jsfiddle, tymeJV's script did work for me; actually, I changed it to:

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

...but this doesn't work for me (in my project/WebPart):

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

(I see no alert while entering vals into the text element)

For context/full disclosure, here is my entire jQuery (at the end of my *.ascs file):

<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>

Changing the event from "input" to "keyup" works just fine, though, so a combination of tymeJV's script and the various suggestions from the comments worked wonders. Change your answer to "keyup" and I'll mark it as correctamundo.

Answer 1

You can use input for an event that fires whenever the input is modified (via paste, key stroke, etc)

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

Demo: http://jsfiddle.net/u9a9fvdo/