javascript - Change span when text field changes

Question

I have a form with several text fields. I want to change a span tag when I write something in the field. Like this:

Any ideas?

Answer 1

You can use keyup and then replace the span content with the textbox value.

<input id="test" type="text" />
<span id="content"></span>

$("#test").keyup(function() {
    $("#content").html($("#test").val());
});

http://jsfiddle.net/

Edit:

You can also use $(this).val() as pXL has suggested.

$("#test").keyup(function() {
    var val = $(this).val();
    $("#content").html(val);
});

Answer 2

You can simply use jquery for this. For eg

<input type="text" id="mytext"/>
<span id="content"></span>

$(document).ready(function(){
    $("#mytext").keyup(function(){
            $('#content').html($(this).val());
        })
})

Answer 3

I would use $.keyup() and update the html with input value.
Demo: Working Demo

$(document).ready(function()
{
    // Regular typing updates.
    $("#input").keyup(function()
    {
        $("#output").html($(this).val());
    });

    // If pasted with mouse, when blur triggers, update.
    $("#input").change(function()
    {
        $(this).keyup();
    });

    // Any value loaded with the page.
    $("#input").keyup();
});

Answer 4

The lost focus is also an aproach,

html:

<input type="text" id="txa" value="123" />
<span>345</span>

jquery:

$('input[id=txa]').blur(function () {
    $(this).next("span").text($(this).val());
});

Glad to help.