文本框的输入值以添加无组织列表（Javascript）

Posted 2023-04-13

【中文标题】文本框的输入值以添加无组织列表（Javascript）

【英文标题】：Input value of a textbox to prepend an unorganised list (Javascript)

【发布时间】：2014-07-26 16:27:00

【问题描述】：

我希望将用户在“typetextbox”中输入的内容添加到“messagebox”UL 中。

HTML 代码：

<ul id="messagebox">
<li></li>
</ul>

<div>
<input type="text" id="typetextbox" maxlength="120" autocomplete="off" />

<button id="submit"> </button>
</div> 

Javascript：

$(document).ready(function()

$('#submit').click(function()
    var message = $('#typetextbox').val();
    $('#messagebox').prepend("<br/>");
);
);

如果我要在 Prepend 括号中输入一些内容，这就是显示的内容，但是这段代码现在没有显示我在点击提交时写入文本框中的任何文本。为什么？如何获取添加到前置列表中的文本框的值？

我确定这是一个我忽略的简单问题，但我们将不胜感激！

【参考方案1】：

$(document).ready(function()    
   $('#submit').click(function()
      var message = $('#typetextbox').val();
      $('#messagebox').prepend(message + "<br/>");
   );
);

或者你的意思是：

$('#messagebox').prepend("<li>" + message + "</li>");

如果您希望对用户输入的 html 特殊字符进行编码（使输入到文本框中的 <b>bold</b> 保持为 <b>bold</b> 并且不给出 bold 文本），请尝试

$('#messagebox').prepend($("<li />").text (message));

【参考方案2】：

您没有预先添加 textarea 的任何值，而只是预先添加了换行符。再看看你的代码。

【参考方案3】：

非常感谢约翰B！！！

我最初有 >，但发现每次我点击提交时，“message +”都会被添加到列表中。像在换行符上添加引号这样简单的事情就可以使它起作用。非常感谢！

不过，快速的问题，我的按钮只有在我点击它时才有效。按 Enter 后如何提交？

再次感谢！