Question

首先，我所拥有的：一个简单的div，它是onClick切换到textarea。 textarea的占位符是div之前的值。

<div class="class" id="test">Test</div>

text = $('#test').text();
$('#test').replaceWith('<textarea onkeyup="update_textarea(this)" 
id="test"  placeholder="' + text + '" />');

updateTextarea函数使新插入的文本可用作值（意味着我可以稍后再使用插入的文本）。

现在我缺少什么或者我想要什么：当我点击我的div值为Test时，它将是可编辑的（因为它不再是div，它是一个textarea）。问题是，占位符是正确的，但是当我在textarea中单击以插入新文本时，占位符将被删除，textarea为空。我如何防止这种情况，将占位符保留为textarea中的值？

我认为必须是onFocus的东西......但是如何保留它。

由于

Answer 1

可能这会对你有所帮助。在$('#test').replace...

之后添加

$('#test').one('focus',function(){
       $(this).text(text)
    })

点击http://jsfiddle.net/a8AA5/

Answer 2

占位符属性旨在在用户将文本输入input后消失，因此在这种情况下它正如预期的那样工作。我怀疑您要将文本应用于textarea元素;为此，我建议如下：

$('#test').live('click',
    function(){
        $(this).replaceWith('<textarea>' + $(this).text() + '</textarea>');
    });

$('textarea').live('blur',
    function(){
        $(this).replaceWith('<div id="test" class="class">' + $(this).text() + '</div>');
    });

JS Fiddle demo

参考文献：

Answer 3

检查

    $("#test").live('click',function(){
    var text = $('#test').text();
    //var text = $('#test').html(); // use this for html tags also
        $('#test').replaceWith('<textarea id="test2">' + text + '</textarea>');
})
$("#test2").live('blur',function(){
        var text2 = $('#test2').val();
        $(this).replaceWith('<div id="test">' + text2 + '</div>');
});
    <div id="test">Test</div>

签入jsFiddle

http://jsfiddle.net/VbSV5/

用textarea编辑 - ＆gt;如何保留占位符？

3 个答案: