javascript - How do I replace div with textarea when I click button (including content)? - Stack Overflow

I recently work with this Fiddle /

    function divClicked() {
        var divHtml = $(this).html();
        var editableText = $("<textarea />");
        editableText.val(divHtml);
        $(this).replaceWith(editableText);
        editableText.focus();
        // setup the blur event for this new textarea
        editableText.blur(editableTextBlurred);
    }

    function editableTextBlurred() {
        var html = $(this).val();
        var viewableText = $("<div>");
        viewableText.html(html);
        $(this).replaceWith(viewableText);
        // setup the click event for this new div
        viewableText.click(divClicked);
    }

    $(document).ready(function () {
        $("div").click(divClicked);
    });

It will replace div tags with textarea when i click the div. My question is, how can i replace div tags with textarea when i click a button using above javascript?

Any Suggestions?

I recently work with this Fiddle http://jsfiddle/GeJkU/

    function divClicked() {
        var divHtml = $(this).html();
        var editableText = $("<textarea />");
        editableText.val(divHtml);
        $(this).replaceWith(editableText);
        editableText.focus();
        // setup the blur event for this new textarea
        editableText.blur(editableTextBlurred);
    }

    function editableTextBlurred() {
        var html = $(this).val();
        var viewableText = $("<div>");
        viewableText.html(html);
        $(this).replaceWith(viewableText);
        // setup the click event for this new div
        viewableText.click(divClicked);
    }

    $(document).ready(function () {
        $("div").click(divClicked);
    });

It will replace div tags with textarea when i click the div. My question is, how can i replace div tags with textarea when i click a button using above javascript?

Any Suggestions?

• javascript
• html
• jquery

Share Improve this question Follow edited Sep 2, 2013 at 4:56 Arturs 1,25855 gold badges2121 silver badges2828 bronze badges asked Sep 2, 2013 at 4:47 EdiSainerEdiSainer 11211 gold badge22 silver badges99 bronze badges 4

• $('#yourButtonID').click(function(){}); – Deepanshu Goyal Commented Sep 2, 2013 at 4:52
• Which DIV do you want to replace when you click the button? – Barmar Commented Sep 2, 2013 at 4:53
• Which button? Why not "contentEditable" attribute? – Rowman Pirce Commented Sep 2, 2013 at 4:53
• Is this fiddle close to what you are looking for? – Harry Commented Sep 2, 2013 at 4:55

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 5

Assuming, I have understood your question, you can try the below.

HTML: Add a button like below after every div.

<div>If no background color is set on the Element, or its background color is set to 'transparent', the default end value will be white.</div>
<button class='btn'>Edit</button>

jQuery: Modify the code as below.

function divClicked() {
    var divHtml = $(this).prev('div').html(); //select's the contents of div immediately previous to the button
    var editableText = $("<textarea />");
    editableText.val(divHtml);
    $(this).prev('div').replaceWith(editableText); //replaces the required div with textarea
    editableText.focus();
    // setup the blur event for this new textarea
    editableText.blur(editableTextBlurred);
}

function editableTextBlurred() {
    var html = $(this).val();
    var viewableText = $("<div>");
    viewableText.html(html);
    $(this).replaceWith(viewableText);
    // setup the click event for this new div
    viewableText.click(divClicked);
}

$(document).ready(function () {
    $(".btn").click(divClicked); //calls the function on button click
});

Working Demo

I hope it helps you,

function divClicked(ele) {
    var divHtml = $(ele).parent().find('p').html();
    var editableText = $("<textarea />");
    editableText.val(divHtml);
    $(ele).parent().find('p').replaceWith(editableText);
    editableText.focus();
    // setup the blur event for this new textarea
    editableText.blur(function() {
        editableTextBlurred(this);
    });
}

function editableTextBlurred(ele) {
    $(ele).replaceWith($('<p>').html($(ele).val()));
}

$(document).ready(function() {
    $(".update").click(function() {
        divClicked(this);
    });
});

please check the demo version here.

You can just try something like this:

function div2text(){ 
    $("#div").replaceWith('<textarea>' + $("#div").html() + '</textarea>');
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  onclick="div2text();" id="div" style="margin: 10px; border: 1px solid black; padding: 10px;"><b>I am a div!</b> <u>Click Anywhere On Me!</u></div><br>
<button id="change" onclick="div2text();">Div-2-Textarea</button>

References

To learn more about the .replaceWith method, visit:

https://www.w3schools./jquery/html_replacewith.asp

why not place textarea element inside div

$("#button_id").click(function(){ 
    $("#div_id").html('<textarea></textarea>');
})

Have you tried this instead:

$(document).ready(function() {
    $("div").click(function(){
        divClicked($(this));
    });
});

Then change your divClicked function slightly to acmodate the jquery object being passed in:

function divClicked(theObject) {
    var divHtml = theObject.html();
    var editableText = $("<textarea />");
    editableText.val(divHtml);
    theObject.replaceWith(editableText);
    editableText.focus();
    // setup the blur event for this new textarea
    editableText.blur(editableTextBlurred);
}

see demo....

html

<div>If no background color is set on the Element, or its background color is set to 'transparent', the default end value will be white.</div>
<div>Element shortcut method for tweening the background color. Immediately transitions an Element's background color to a specified highlight color then back to its set background color.</div>
<div>Element shortcut method which immediately transitions any single CSS property of an Element from one value to another.</div>

<button id="buttonclick">click</button>

js

function divClicked() {
    var divHtml = [];
    $("div").each(function(){
    divHtml.push($(this).html());
     var editableText = $("<textarea />");
    editableText.val($(this).html());
    $(this).replaceWith(editableText);
     editableText.blur(editableTextBlurred);
    });
    editableText.focus();
    // setup the blur event for this new textarea

}

function editableTextBlurred() {
    var html = $(this).val();
    var viewableText = $("<div>");
    viewableText.html(html);
    $(this).replaceWith(viewableText);
    // setup the click event for this new div
    viewableText.click(divClicked);
}

$(document).ready(function() {
    $("#buttonclick").click(divClicked);
});

css

div {
    margin: 20px 0;
}

textarea {
    width: 100%;
}

First you should create a button like

<input type="button" value="Click me" id="btn1" />

Then use the following code in your document ready function

   $('#btn1').click(function () {
        divClicked.call($('div#one'));
    });

Note: I have assigned id one to first div.

See working fiddle