goody-goody,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<textarea></textarea>
<button id='caps'>ALL CAPS</button>
<button id='lower'>all lowercase</button>
<button id='cancel'>Cancel</button>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.4.js'></script>
<script>
$(document).ready(function() {
var temp = [], area = $('textarea');
$('#caps').click(function() {
$text = area.val();
area.val($text.toUpperCase());
if(temp[0] != $text) temp.unshift($text)
});
$('#lower').click(function() {
$text = area.val();
area.val($text.toLowerCase());
if(temp[0] != $text) temp.unshift($text)
});
$('#cancel').click(function() {
$text = temp.shift();
if ($text) {
area.val($text);
}
});
})
</script>
</body>
</html>