I want to have it so when I type into a textbox (or an input field) and have whatever I am typing simultaneously appear in a div or just other place on the page?
The stackoverflow site does this when we type up a question. As we type a question, it shows whatever we are typing in a box below the textbox. Hope my question makes sense!
Thanks in advance.
I want to have it so when I type into a textbox (or an input field) and have whatever I am typing simultaneously appear in a div or just other place on the page?
The stackoverflow site does this when we type up a question. As we type a question, it shows whatever we are typing in a box below the textbox. Hope my question makes sense!
Thanks in advance.
Share Improve this question asked Jul 24, 2010 at 21:16 Amir RustamzadehAmir Rustamzadeh 4,5487 gold badges36 silver badges43 bronze badges 1- Thank you all. Stackoverflow (the munity in particular) and jQuery are the greatest thing since the start of the internet. Again thanks for the help. Maybe one day I can return the favor. – Amir Rustamzadeh Commented Jul 24, 2010 at 22:26
3 Answers
Reset to default 7The StackOverflow site does a bit more because it does syntax highlighting too, but the basic idea is to listen to the keyboard events - keydown (better), keypress or keyup (not so good if a button is continuously pressed) and in its callback update the value of the target container with the value of the source container. Here's a quick example.
The best solution is to bind to both - keyup and (keydown or keypress). Reason being when the key(press|down) callbacks are fired, the value of the textbox is still the old value so when when we update the target container, it doesn't get the last character. keyup on the other hand is fired after the value of the text box is updated. However, keyup will not fire if you keep a button pressed as the button is only released once, so the target updates at the very end. The solution is to use both :)
$("textarea").bind('keyup keydown', function() {
$("#target").html(this.val());
});
See an example here.
You could use the .keydown() function to achieve this effect:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#foo').keydown(function() {
$('#result').text($(this).val());
});
});
</script>
</head>
<body>
<input type="text" name="foo" id="foo" />
<div id="result"></div>
</body>
</html>
Good question... never thought of it before, but that functionality is cool.
I went to View Source:
There's a function attached to this page:
<script type="text/javascript">
$(function() {
editorReady(1, heartbeat.answers);
});
</script>
The URL here contains the function "editorReady". http://sstatic/js/question.js?v=b05e8725a843