Comment remplacer le div par un textarea lorsque je clique sur le bouton (y compris le contenu) ?

Question

J'ai récemment travaillé avec ce violon http://jsfiddle.net/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);
    });

Il remplace les balises div par des zones de texte lorsque je clique sur la div. Ma question est la suivante : comment puis-je remplacer les balises div par des zones de texte lorsque je clique sur un bouton en utilisant le javascript ci-dessus ?

Des suggestions ?

Answer 1

En supposant que j'ai compris votre question, vous pouvez essayer ce qui suit.

HTML : Ajouter un button comme ci-dessous après chaque 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 : Modifiez le code comme ci-dessous.

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
});

Démonstration de travail

Answer 2

J'espère que cela vous aidera,

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);
    });
});

veuillez consulter la version de démonstration aquí .

Answer 3

Pourquoi ne pas placer l'élément textarea à l'intérieur du div

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

Answer 4

Avez-vous essayé ceci à la place :

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

Modifiez ensuite légèrement votre fonction divClicked pour l'adapter à l'objet jquery transmis :

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);
}

Answer 5

voir 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%;
}