使用文本区域编辑 ->如何保留占位符？

Question

首先，我有:一个简单的div，它是onClick切换到一个文本区域。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，它是一个文本区)。问题是，占位符是正确的，但是当我单击文本区域内插入新文本时，占位符被删除，文本区域为空。如何防止这种情况，保持占位符作为文本区域内的值?

我想一定是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.

引用:

• live() .
• replaceWith() .
• text() .

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/