jQuery keyup vs keydown vs change

Simple jQuery example of the differences between keyup, keypress, and change

by dshilkret

HTML

<input type="text" id="myInput" placeholder="Enter text">
<div class="label">On key press:</div>
<div id="keyPressContent" class="content"></div>
<div class="label">On key up:</div>
<div id="keyUpContent" class="content"></div>
<div class="label">On change:</div>
<div id="changeContent" class="content"></div>
<div id="changeContent2" ng-change="changeText()" class="content"></div>

CSS

input {
    border: 1px solid;
}
div.label {
    font-weight: bold;
}
div.content {
    min-height: 30px;
    border: 1px solid;
}
div#keyUpContent {
}
div#keyPressContent {
}
div#changeContent {
}
}

JavaScript

jQuery(function ($) {
    var $input = $('#myInput')
    $input.on("keyup", function () {
        $('div#keyUpContent').html($input.val())
    });
    $input.on("keypress", function () {
        $('div#keyPressContent').html($input.val())
    });
    $input.on("change", function () {
        $('div#changeContent').html($input.val())
    });

});

    function changeText(){
    alert("text changed");
    }