Question

我最近使用这个小提琴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);
    });

当我点击div时，它将用textarea替换div标签。我的问题是，当我使用上面的javascript单击按钮时，如何用textarea替换div标签？

任何建议？

Answer 1

假设我已经理解了你的问题，你可以尝试下面的内容。

HTML：每button后添加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：修改代码如下。

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

Answer 2

我希望它可以帮到你，

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

请查看演示版here。

Answer 3

为什么不将textarea元素放在div

中

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

Answer 4

您是否尝试过这样做：

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

然后稍微更改divClicked函数以适应传入的jquery对象：

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

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

Answer 6

首先你应该创建一个像

这样的按钮

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

然后在文档就绪功能中使用以下代码

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

注意：我已将id one分配给第一个div。

见工作fiddle

Answer 7

你可以试试这样的：

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

<script src="https://cdnjs.cloudflare.com/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>

参考资料

要了解有关 .replaceWith 方法的更多信息，请访问：

<块引用>

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

单击按钮（包括内容）时如何用textarea替换div？

7 个答案:

参考资料