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

发布于 2024-12-09 06:47:08 字数 541 浏览 1 评论 0原文

首先，我有：一个简单的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 函数使新插入的文本可用作值（意味着我可以稍后再次使用插入的文本）。

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

我想一定是 onFocus 的东西......但如何保留它。

谢谢

原文

First of all, what I have: a simple div, which is onClick switched to an textarea. The placeholder of the textarea is the value the div had before.

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

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

The updateTextarea function makes the newly inserted text available as the value (means I can use the inserted text later again).

Now what Iam missing or what I want: When I click my div with the value Test, its going to be editable (because its no longer a div, it is a textarea). The problem is, the placeholder is correct, but when I click inside the textarea to insert a new text, the placeholder is deleted, the textarea is empty. How could I prevent this, keeping the placeholder as a value within the textarea?

Must be something with onFocus I think... but how to keep it.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ㄖ落Θ余辉 2024-12-16 06:47:08

也许这会对你有所帮助。在 $('#test').replace... 之后添加此内容

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

http:// jsfiddle.net/a8AA5/

May be this will helps you. Add this after $('#test').replace...

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

check here http://jsfiddle.net/a8AA5/

回复收藏 0 原文

筱果果 2024-12-16 06:47:08

占位符属性被设计为在用户在 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 演示。

参考文献：

A placeholder attribute is designed to disappear once the user enters text into the input, so it's working as intended in this case. I suspect that you want to apply text to the textarea element instead; and, for that, I'd suggest the following:

$('#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.

References:

回复收藏 0 原文

陌路黄昏 2024-12-16 06:47:08

检查此检查

    $("#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/

Check this

    $("#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>

Check in jsFiddle