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());        
})

如果textarea中没有文本，则不应有任何列表，使用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();
    }
});

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

2 个答案: