Question

I am trying to make editable text. What I have is a line of text that you click and I need an text box to appear, allowing the user to change the value of the text. With the code that I do have, when you click the text disappears. Any ideas?
html

       <div class="test">Click here</div>

jquery

       $(".test").click(function() {
           var inputValue = $(".test").text();  
           $(".test").html("<input value='"+inputValue+"' 
               type='text' id='box1'>");
           $("#box1").val(inputValue).select();
        });

Answer 1

Maybe it would be simplier if you will use existing solutions. For example: jeditable

But if you want (See DEMO):

$(document).ready(function () {
    var beginEdit = function () {
        var text = $(this).text();
        var input = $('<input value="' + text + '" type="text">').one('blur', endEdit);

        $(this).empty().append(input);
    };

    var endEdit = function () {
        var text = $(this).val();
        $(this).parent().html(text).one('click', beginEdit);
    };

    $(".text").one('click', beginEdit);
});​

As a plugin for jQuery (see DEMO2):

$.fn.editable = function () {
    this.each(function () {    
        var beginEdit = function () {
            var text = $(this).text();
            var input = $('<input value="' + text + '" type="text">').one('blur', endEdit);

            $(this).empty().append(input);
        };

        var endEdit = function () {
            var text = $(this).val();
            $(this).parent().html(text).one('click', beginEdit);
        };

        $(this).one('click', beginEdit);        
    });
};

$(document).ready(function () {
    $(".text").editable();
});​