javascript - Whats wrong this live preview jQuery script? - Stack Overflow

admin管理员组

文章数量:1386311

i have this script in jsfiddle, that while im typing it should show display the live text underneath.

its a simple script, but i cnt seem to see what the problem is, thanks :))

/

---

EDIT: Adding code from link.

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

HTML

<textarea id="someTextBox"></textarea>
<div id="target"></div>

i have this script in jsfiddle, that while im typing it should show display the live text underneath.

its a simple script, but i cnt seem to see what the problem is, thanks :))

http://jsfiddle/XWsqz/

---

EDIT: Adding code from link.

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

HTML

<textarea id="someTextBox"></textarea>
<div id="target"></div>

• javascript
• jquery
• html

Share Improve this question Follow edited Nov 13, 2010 at 15:02 user113716 323k6464 gold badges453453 silver badges441441 bronze badges asked Nov 13, 2010 at 14:42 getawaygetaway 9,0002323 gold badges6666 silver badges9696 bronze badges 2

• getaway - I took care of it here, but please place your code in the question in the future. Thanks. :o) – user113716 Commented Nov 13, 2010 at 14:49
• Nobody has mentioned the minor flaw in your event binding. See what happens when you hold down a letter? It will eventually update the target when you let the key go, but did you try pasting text with the mouse? You need to bind on more than just the keyup event if you want this to work for all updates to the textarea. – Bernhard Hofmann Commented Nov 14, 2010 at 9:04

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

Should be $(this).val() instead of this.val() because this points to the DOM element and not the jquery element which has the .val() function defined:

$('#target').html($(this).val());

As everyone is suggesting, $(this).val() will work. However, it doesn't make a lot of sense to incur the overhead of creating a jQuery wrapped object on every single keypress. this.value is a better option if you don't need jQuery's extended methods on that element:

$(document).ready(function(){
  $('#someTextBox').keyup(function(){
    $('#target').html(this.value);
  });
});

Use $(this).val() instead of this.val().

The former is a jQuery object, the latter, I think, is simply a DOM node.

So:

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

JS Fiddle demo.

You need to do $(this).val() instead of this.val()

.val() is a jQuery function, so it only works when you're calling a jQuery object.

this

is not jQuery on its own (in your example). You have to wrap it in $( ), like so:

$(this)

So the correct way would be like so:

$("#target").html( $(this).val() );

本文标签： javascriptWhats wrong this live preview jQuery scriptStack Overflow