3

我最近使用这个小提琴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 标签？

有什么建议么？

4

7 回答 7

5

假设我已经理解了您的问题，您可以尝试以下方法。

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

工作演示

于 2013-09-02T05:01:03.103 回答
1

希望对你有帮助

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

请在此处查看演示版本。

于 2013-09-02T07:15:30.847 回答
0

为什么不将 textarea 元素放在 div 中

$("#button_id").click(function(){ 
    $("#div_id").html('<textarea></textarea>');
})
于 2013-09-02T04:53:25.257 回答
0

你有没有试过这个：

$(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);
}
于 2013-09-02T04:53:40.497 回答
0

看演示......

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%;
}
于 2013-09-02T04:57:42.587 回答
0

首先你应该创建一个按钮

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

然后在您的文档准备功能中使用以下代码

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

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

见工作小提琴

于 2013-09-02T04:58:59.350 回答
0

你可以尝试这样的事情：

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

于 2021-05-08T05:08:40.957 回答