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

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

omg
  • 136,412
  • 142
  • 288
  • 348

5 Answers5

46

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());
});
Christian C. Salvadó
  • 807,428
  • 183
  • 922
  • 838
19

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".

Felix
  • 1,910
  • 1
  • 15
  • 11
7
$('#name').keyup(function() {
    $('#display').text($(this).val());
});
janoliver
  • 7,744
  • 14
  • 60
  • 103
2

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());
});
Jan Zich
  • 14,993
  • 18
  • 61
  • 73
  • Keydown events occur before the character is actually entered, so this solution delays the output by one character (`#display` will never show the most recently typed character in `#name`) – Jackson H Nov 24 '19 at 23:50
0

code.

$(document).ready(function(){
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

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


});
</script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="name" />
<span id="display"></span>
</body>
</html>
Chabwera Frank Kauma
  • 1
  • 1
  • 2
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 20 '21 at 06:09