Keylogger
Posted: Mon Jan 06, 2014 11:52 pm
Live Demo - http://liveweave.com/aes3lS
There's many nice things about JQuery. I find they're e.which and e.type event handlers to be very handy when working with key events, because it gives me the exact numerical key value I need for whatever I'm working on at the given time.
So here's a basic keylogger that maybe helpful for you as well.
Enjoy!
CSS:
There's many nice things about JQuery. I find they're e.which and e.type event handlers to be very handy when working with key events, because it gives me the exact numerical key value I need for whatever I'm working on at the given time.
So here's a basic keylogger that maybe helpful for you as well.
Enjoy!
CSS:
Code: Select all
HTML:
#keylog, #log, #clear, #lognums, #logkeys {
width: 90%;
}
#keylog {
font-family: Sans-Serif;
font-size: 1.25em;
}
#log {
font-family: Sans-Serif;
font-size: 2.5em;
}
#clear {
cursor: pointer;
padding: .5em 0;
}Code: Select all
JavaScript:
<center>
<input id='clear' type='button' value='Clear'>
<form name='sites'>
<input id='keylog' type='text' placeholder='Press any key for keylog...' />
</form>
<div id='log'></div>
<textarea id='logkeys'></textarea>
<textarea id='lognums'></textarea>
</center>Code: Select all
Full Code:
$(function() {
$('#keylog').click(function() {
$(this).select();
});
$('#clear').on('click',function(e){
$('#log').html('');
$('#keylog, #lognums, #logkeys').val('');
});
$('#keylog').on('keydown',function(e){
$('#log').html(e.type + ': ' + e.which);
});
$('#keylog').on('keydown',function(e){
$('#lognums').val(function(_, oldVal) {
return oldVal + e.which;
});
});
$('#keylog').on('keydown',function(e){
$('#logkeys').val(function(_, oldVal) {
return oldVal + String.fromCharCode(e.which);
});
});
$('#keylog').on('mousedown',function(e){
$('#log').html(e.type + ': ' + e.which);
});
});
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Log Key | event.which</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type='text/css'>
#keylog, #log, #clear, #lognums, #logkeys {
width: 90%;
}
#keylog {
font-family: Sans-Serif;
font-size: 1.25em;
}
#log {
font-family: Sans-Serif;
font-size: 2.5em;
}
#clear {
cursor: pointer;
padding: .5em 0;
}
</style>
<script type='text/javascript'>
$(function() {
$('#keylog').click(function() {
$(this).select();
});
$('#clear').on('click',function(e){
$('#log').html('');
$('#keylog, #lognums, #logkeys').val('');
});
$('#keylog').on('keydown',function(e){
$('#log').html(e.type + ': ' + e.which);
});
$('#keylog').on('keydown',function(e){
$('#lognums').val(function(_, oldVal) {
return oldVal + e.which;
});
});
$('#keylog').on('keydown',function(e){
$('#logkeys').val(function(_, oldVal) {
return oldVal + String.fromCharCode(e.which);
});
});
$('#keylog').on('mousedown',function(e){
$('#log').html(e.type + ': ' + e.which);
});
});
</script>
</head>
<body>
<center>
<input id='clear' type='button' value='Clear'>
<form name='sites'>
<input id='keylog' type='text' placeholder='Press any key for keylog...' />
</form>
<div id='log'></div>
<textarea id='logkeys'></textarea>
<textarea id='lognums'></textarea>
</center>
</body>
</html>
thanks for posting