在textarea的keyup事件中将文本添加到无序列表中

Question

在textarea的keyup事件中将文本添加到无序列表中，当textarea 中没有文本时，不应该有任何li

HTML:

<textarea id="activityText"></textarea>
<div id="qwe">
<ul>
<li id="textFromTextArea"></li>
</ul>
</div>

jQuery:

$("#activityText").keyup(function () {
$("#textFromTextArea").text($("#activityText").val());        
})

如果文本区域中没有文本，那么就不应该有任何列表，jQuery 是否可能

https://ibb.co/gjpDTL

Answer 1

选项1:

我将id从li移动到了ul。我删除了li元素，因为您不想显示标记。

<div id="qwe">
<ul id="textFromTextArea">
</ul>
</div>
<textarea id="ActivityText"></textarea>

和js:

$("#ActivityText").keyup(function () {
var val = $(this).val();
if($("#textFromTextArea li").length===0) {
var $li = $("<li>");
$li.html(val);
$("#textFromTextArea").append($li);
} else {
$("#textFromTextArea li").html(val);
}
});

选项2:

显示/隐藏li元素，保留您编写的实际HTML，但我添加了一个CSS类hide

<div id="qwe">
<ul>
<li id="textFromTextArea" class="hide"></li>
</ul>
</div>
<textarea id="ActivityText"></textarea>

css

.hide {
display: none;
}

和js

$("#ActivityText").keyup(function () {
var val = $(this).val();
var $li = $("#textFromTextArea");
if(val.length === 0) {
$li.addClass("hide");
} else {
$li.removeClass("hide");      
}
$li.html(val);
});

Answer 2

试试这个

HTML:

<textarea id="activityText"></textarea>
<div id="qwe">
<ul id="list">
</ul>
</div>

jQuery:

var textval = '';
$("#activityText").on("keyup", function() {
textval = $(this).val();
if (textval.length > 0) {
$("#list").html('<li>' + textval + '</li>');
} else {
$("#list").empty();
}
});