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]

Shaunak D · Accepted Answer · 2014-05-22 10:42:23Z

2

Check this DEMO

HTML:

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

JS:

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

answered May 22, 2014 at 10:42

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user3253748 Over a year ago

shaunakde, thx for the reply. It works perfectly on the fiddle but I can't get it to work in my script. When I give some text and click outside the input it still does nothing :(

user3253748 Over a year ago

shaunakde, here is my fiddle, please check what is missing. It doesn't work there neither: jsfiddle.net/w6242

Shaunak D Over a year ago

you have not selected jquery version. Right top corner : Frameworks and Extensions. Your fiddle needs jQuery. Updated Version

user3253748 Over a year ago

It's 2.1.1, but is not listed there

user3253748 Over a year ago

O.K. when I select some versions of jQuery it works fine. But I still don't understand why can't I run it locally on my computer. The version I have is jQuery 2.1.1

|

Madhu · Accepted Answer · 2014-05-22 10:49:48Z

0

check this

Fiddle

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

answered May 22, 2014 at 10:49

Madhu

2,5513 gold badges21 silver badges34 bronze badges

Comments

keypaul · Accepted Answer · 2014-05-22 10:49:48Z

0

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

answered May 22, 2014 at 10:49

keypaul

5078 silver badges12 bronze badges

Comments

David Thomas · Accepted Answer · 2014-05-22 10:53:37Z

0

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:

answered May 22, 2014 at 10:53

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Collectives™ on Stack Overflow

jQuery change value of input and display it as text

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related