Keylogger

3 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Keylogger
mikethedj4
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:
Code: Select all
#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;
}
HTML:
Code: Select all
<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>
JavaScript:
Code: Select all
$(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);
	});
});
Full Code:
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>
Last edited by mikethedj4 on Tue Jan 07, 2014 1:42 pm, edited 1 time in total.
User avatar
noypikami
VIP - Donator
VIP - Donator
Posts: 151
Joined: Sat Dec 22, 2012 1:49 am

Re: Keylogger
noypikami
very interesting, i must try this... :) thanks for posting
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Keylogger
mikethedj4
No problem. I updated the demo because I forgot to add the jquery library to the head tags, which is important with this otherwise it won't work.
3 posts Page 1 of 1
Return to “Tutorials”