How to get the new value of an HTML input after a keypress has modified it?

<input type="text" id="foo" value="bar">

function showMe(e) {
// i am spammy!
  alert(e.value);
}
....
<input type="text" id="foo" value="bar" onkeyup="showMe(this)" />

<html>
    <head>
        <script>
        function callme(field) {
            alert("field:" + field.value);
        }
        </script>
    </head>
    <body>
        <form name="f1">
            <input type="text" onkeyup="callme(this);" name="text1">
        </form>
    </body>
</html>

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
    		$('#foo').keyup(function(e) {
    			var v = $('#foo').val();
    			$('#debug').val(v);
    		})
    	});
    </script>
</head>
<body>
    <form>
    	<input type="text" id="foo" value="bar"><br>
    	<textarea id="debug"></textarea>
    </form>
</body>
</html>