jQuery change value of input and display it as text

Question

I'm struggling with the following problem. I have input text element. I want a user to enter something there and then his value appears as a normal text (the input should disappear).

I searched for a few solutions but nothing worked for me. What I tried (whatever function I provide, I get no results, what should I provide to get the effect I described above and how to make it happen?):

$('input.modified').on('input', function(){
        (this).append('<p>some</p>');
});

OR

$("input.modified").bind("propertychange change keyup paste input", function(){
    $(this).append("<p>dgdgd</p>");
});

OR

$("input.modified").change(function(){
           $(this).css("visibility","hidden");
 }); //end change function 

How to make functions like .on() or .change() work with my code?

---

thanks for all the answer, but I can't move your examples to my code :(

Please verify this fiddle what I'm missing:

[http://jsfiddle.net/w6242/][1]

Answer 1

Check this DEMO

HTML :

<input class="modified" type="text"/>
<p></p>

---

JS :

$("input.modified").change(function(){
           $('p').html($(this).val());
           $(this).css("visibility","hidden");
});

Answer 2

check this

Fiddle

$("#in").focusout(function(e){
$("span").html(($("#in").val()));
           $(this).hide();
 });

Answer 3

Here a fiddle http://jsfiddle.net/keypaul/NsWC5/5/

HTML

<div id="wrapper">
    <input type="text" id="writer" />
    <a href="#" id="submit">send</a>
</div>

JQuery

$("#submit").click(function(e){
    var txt = $("#writer").val();
    $("#writer").fadeOut(400);
    $("#submit").fadeOut(400, function(){
        $("#wrapper").append('<div id="text">' + txt + '</div>').hide().fadeIn(600);
    });
    e.preventDefault();
});

If you need to do that with onther event (instead of a click submit) you can use onchange or focusout applied to your input element

Answer 4

At its simplest, assuming you really want to replace the input :

$('#demo').on('keyup', function(e){
    if (e.which === 13) {
        var p = $('<p />', {
            text : this.value
        });
        $(this).replaceWith(p);
    }
});

JS Fiddle demo .

Or, to insert an adjacent element and simply hide the input :

$('#demo').on('keyup', function(e){
    if (e.which === 13) {
        var span = $('<span />', {
            text : this.value
        });
        $(this).hide().after(span);
    }
});

JS Fiddle demo .

The above jQuery works with the following demonstrative HTML:

<input id="demo" type="text" />

References:

• after() .
• hide() .
• on() .
• replaceWith() .