Show text while typing

Question

I thought this one was a simple one but I wasn't able to find anything out there, except one post here on STO.

Problem is the code doesn't work. I created a fiddle so you can see it for yourself.

Here is the code from the fiddle:

$('#someTextBox').keyup(function() {
    $('#target').html(this.val());
});

However, my HTML is a bit different than the example:

<textarea name="comment-box" id="comment-box" class="required"></textarea>
...
<p id="comment-preview"></p>

All I need help with is a way to display what's being typed on the textarea on the "comment-preview" container.

Any help guiding me on this one is greatly appreciated.

score 18 · Accepted Answer · answered Nov 05 '12 at 20:18

18

Change this.val() to $(this).val()

DEMO: http://jsfiddle.net/FjNzS/1/

.val is a jQuery function and can be accessed from jQuery object. Inside the handler, this is DOM object and so you need to wrap it with $() to make it a jQuery object.

answered Nov 05 '12 at 20:18

Selvakumar Arumugam

79,297
15
120
134

Oh! There was a typo in the example. Explanation was thorough plus the working example, thanks a lot for that. – Ricardo Zea Nov 05 '12 at 20:24

score 5 · Answer 2 · answered Nov 05 '12 at 20:18

5

You can either use $(this).val() or this.value, but this.val() is incorrect.

answered Nov 05 '12 at 20:18

elclanrs

92,861
21
134
171

score 2 · Answer 3 · answered Nov 05 '12 at 20:24

2

You can also try this code with .on():

$('#someTextBox').on('keyup', function(){
    $('#target').html($(this).val());
});

Exemple http://jsfiddle.net/FjNzS/2/

answered Nov 05 '12 at 20:24

RDK

4,540
2
20
29

score 1 · Answer 4 · answered Nov 05 '12 at 20:20

1

$("#comment-box").keyup(function() {
    $("#comment-preview").text($(this).val());
});

answered Nov 05 '12 at 20:20

Adam Moss

5,582
13
46
64

`.text()` will just get you the initial value.. you should use `.val` or `this.value`. http://stackoverflow.com/questions/3964646/textarea-elem-val-vs-elem-text – Selvakumar Arumugam Nov 05 '12 at 20:21
Yes, this is exactly how I'm using it now. Gave you an upvote. Thanks. – Ricardo Zea Nov 05 '12 at 20:41

Show text while typing

4 Answers4

Linked