CODEWITHSUNDEEP
jqueryevent-handling
omg
omg

Reputation: 139862

How to real time display input value with jQuery?

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

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

Upvotes: 14

Views: 51525

Answers (5)

Chabwera Frank Kauma
Chabwera Frank Kauma

Reputation: 1

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>

Upvotes: 0

Felix
Felix

Reputation: 1910

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

Upvotes: 19

Jan Zich
Jan Zich

Reputation: 15323

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());
});

Upvotes: 2

janoliver
janoliver

Reputation: 7824

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

Upvotes: 7

Christian C. Salvad&#243;
Christian C. Salvad&#243;

Reputation: 827266

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());
});

Upvotes: 46

Related Questions