# Trigger keypress event with keycode - keydown, keypress, keyup events are able to be triggered without actual input. Even if trigger keypress with keycode of 65('a'), no value appears in textbox.

# Trigger keypress event with keycode - keydown, keypress, keyup events are able to be triggered without actual input. Even if trigger keypress with keycode of 65('a'), no value appears in textbox.

by jihoon kim

HTML

<p><label>input: <input type="text" name="foo" id="input" value="" /></label></p>

<p>
    <button class="keydown" data-code="13">Trigger keydown Enter</button>
    <button class="keypress" data-code="13">Trigger keypress Enter</button>
    <button class="keyup" data-code="13">Trigger keyup Enter</button>
</p>

<p>
    <button class="keydown" data-code="65">Trigger keydown 'a'</button>
    <button class="keypress" data-code="65">Trigger keypress 'a'</button>
    <button class="keyup" data-code="65">Trigger keyup 'a'</button>
</p>

<hr />

<div id="console"></div>

JavaScript

console.d = function(log){
    $('#console').text(log);
}

var callback = function(e){
    console.log(e.type, e);
    var text = e.type;
    var code = e.which ? e.which : e.keyCode;
    if(13 === code){
        text += ': ENTER';
    } else {
        text += ': keycode '+code;
    }
    console.d(text);
};

$('#input').keydown(callback);
$('#input').keypress(callback);
$('#input').keyup(callback);

$('.keydown').click(function(e){
    var code = $(this).data('code');
    $('#input').trigger(
        jQuery.Event( 'keydown', { keyCode: code, which: code } )
    );
});
$('.keypress').click(function(e){
    var code = $(this).data('code');
    $('#input').trigger(
        jQuery.Event( 'keypress', { keyCode: code, which: code } )
    );
});
$('.keyup').click(function(e){
    var code = $(this).data('code');
    $('#input').trigger(
        jQuery.Event( 'keyup', { keyCode: code, which: code } )
    );
});