Login/Register
How to real time display input value with jQuery?
Asked Answered
Solved jqueryevent-handling
P

5

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

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

Purslane answered 10/9, 2009 at 7:14 Comment(0)
S
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());
});
Suellen answered 10/9, 2009 at 7:15 Comment(1)
this does not consider the user pasting using the mouse, see answers below – Basque
I
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".

Instance answered 19/3, 2013 at 4:3 Comment(1)
This covers more cases, including 'paste', which the accpeted answer does not. – Hithermost
R
7
$('#name').keyup(function() {
    $('#display').text($(this).val());
});
Rockhampton answered 10/9, 2009 at 7:16 Comment(0)
F
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());
});
Fanatic answered 10/9, 2009 at 7:23 Comment(1)
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) – Pock
S
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>
Subscapular answered 19/11, 2021 at 23:32 Comment(1)
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. – Zipnick

© 2022 - 2024 — McMap. All rights reserved.