How to real time display input value with jQuery?

Question

<input type="text" id="name" />
<span id="display"></span>

So that when user enter something inside "#name",will show it in "#display"

Answer 1

You could simply set input value to the inner text or html of the #display element, on the keyup event:

$('#name').keyup(function () {
  $('#display').text($(this).val());
});

Answer 2

A realtime fancy solution for jquery >= 1.9

$("#input-id").on("change keyup paste", function(){
    dosomething();
})

if you also want to detect "click" event, just:

$("#input-id").on("change keyup paste click", function(){
    dosomething();
})

if your jquery <=1.4, just use "live" instead of "on".

Answer 3

$('#name').keyup(function() {
    $('#display').text($(this).val());
});

Answer 4

The previous answers are, of course, correct. I would only add that you may want to prefer to use the keydown event because the changes will appear sooner:

$('#name').keydown(function() {
    $('#display').text($(this).val());
});