Question

这可能是一个非常基本的问题，因为我在这里所希望的似乎并不那么疯狂 - 我已经彻底查看了现有的答案或更好的解决方案，所以如果这是我的话，我会事先道歉任何形式的重复！

我的问题是将数据追加到现有的textarea元素：

的jsfiddle ： https://jsfiddle.net/natureminded/7w3rmggp/

我的HTML ：

<textarea id='chat'></textarea>

我的JS / jQuery ：

//note: 'chatMsg' data is provided back from the server
$('#chat').append(chatMsg.name+': '+chatMsg.message+'&#10;');
$('#chat').scrollTop($('#chat')[0].scrollHeight); // focuses on bottom of textarea

我想要的输出：新行附加到textarea，每条新消息都作为新行。在texarea底部没有多余的线条。

我遇到了什么：的确，新行附加到textarea，每行作为一个新行（由于使用了
 HTML回车）。但是，由于此新行字符位于我的append()字符串的末尾，因此在我的上一条消息下方添加了一个空行（请参阅：https://biturl.io/VCjaj5获取屏幕截图）。将回车符添加到字符串的前面会修复底部的额外换行符，但会在发送第一条消息时在最顶部创建换行符。

我了解另一种方法是抓住.val()的{{1}}，将新数据添加为新行，例如：

$('#chat')

但是，当我尝试这种方法时，希望将新消息添加为var oldChat = $('#chat').val(); var newChat = oldChat + '
' + chatMsg.name + ': ' + chatMsg.message; $('#chat').val(newChat);下面的新行，HTMl托架字符不显示，而是显示为文本（请参阅：https://biturl.io/VCjmZ3）。我也尝试使用oldChat字符，但这实际上已经杀死了我的javascript \n（未显示）并且我的聊天中断了。

是否有更好的方法可以在我的聊天中添加新行，而不会在底部留下额外的空白区域？

注意：我想到的另一个可能的解决方案是尝试以某种方式使用正则表达式来抓取最后一行并将其删除，但我想我会问这里是否有更简单的方法来执行此操作，或者如果我太挑剔，我希望我的textarea附加文字干净整洁（没有额外的换行符）。

Answer 1

您可以使用newLine BEFORE而不是之后，为了确保第一行上方没有新行，请检查textarea是否为空。

所以（pesudo代码在这里，但希望你能得到这个想法）

string = chatmessage
// Prepend newline to string if the textarea already contains content
if textarea.value.length !== 0
  string = '&#10;' + string

textarea.value = string

Answer 2

试试这个：

var strt = $('#chat').text().replace(/[\s\r\n\t]/g,"").length == 0 ? "" : "&#10";

$('#chat').append(strt + chatMsg.name+': '+chatMsg.message);

方案：如果#chat没有附加消息，请检测break line + message是否有消息附加#chat。

如何在使用jQuery附加文本后删除textarea底部的空换行符？

2 个答案: