设置要由 keyup() 事件修改的 div 的默认 html

Question

>我有一个textarea，我想将其值复制到另一个div作为预览。 它工作正常，除了keyup似乎会自动清除它将写入的div。 有什么办法可以防止这种情况吗？ 不让默认文本出现在我的输出div中是一个可用性问题。

$('.preview-wrap').html('<textarea maxlength="118" class="tweet" placeholder="My default"></textarea>');
$(".tweet").keyup(function (event) {
    var value = $(this).val();
    $('.tweet-preview').text(value);
 }).keyup();

有关完整示例，请参阅此小提琴 - "输出"区域应包括指示的"我的默认"文本。

演示

谢谢！

Answer 1

这是更新代码

$(".tweet").keyup(function (event) {
    var value = $(this).val();
    $('.tweet-preview').text(value);
    //console.log($('.tweet-preview').text() == '')
    if( $('.tweet-preview').text() === '' ){
        $('.tweet-preview').text("My Default")
    }
});

演示

Answer 2

我们可以通过JQuery来做到这一点 - CSS技巧，用这个改变你的代码。

---

.HTML：

<div class="tweet-preview" placeholder="My Placeholder String" 
style="border:1px solid #666; min-height: 30px;" >My default</div>

---

JQuery：

$('.tweet-preview').attr("placeholder", $('.tweet').attr('placeholder'));

---

.CSS：

[class=tweet-preview]:empty:not(:focus):before{
    content:attr(placeholder);
    color: #b3b3b3;
}

---

因此，我们正在为您的div创建假占位符。

完整工作演示