如何使用jQuery在添加文本后删除文本区域底部的空换行符?

How can I remove the empty line break at the bottom of my textarea after appending text using jQuery?

本文关键字：文本 底部 换行符 区域 jQuery 何使用 添加 删除      更新时间：2023-09-26

这可能是一个非常基本的问题，因为我在这里所希望的似乎并不疯狂——我已经仔细寻找了一些现有的答案或更好的解决方案，所以我提前道歉，如果这是任何形式的重复!

我的问题是附加()数据到现有的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

我想要的输出:新行追加到文本区域，每条新消息作为一个新行。文本区域底部没有多余的行。

我所经历的:确实，新行附加到文本区域，每个作为新行(由于使用&#10; HTML回车符)。然而，由于这个新的行字符在我的append()字符串的末尾，在我的最后一条消息下面添加了一个空白行(见:https://biturl.io/VCjaj5截图)。将回车符添加到字符串的前面将固定底部的额外换行符，但是在发送第一条消息时将在最顶部创建一个换行符。

我理解另一种方法是通过抓取$('#chat')的.val()，将我的新数据添加为新行，例如:

var oldChat = $('#chat').val();
var newChat = oldChat + '&#10;' + chatMsg.name + ': ' + chatMsg.message;
$('#chat').val(newChat);

然而，当我尝试这种方法，希望将新消息作为oldChat下面的新行添加时，HTMl回车字符不显示，而是显示为文本(参见:https://biturl.io/VCjmZ3)。我还尝试使用'n字符，但这实际上杀死了我的javascript prompt(未显示)和我的聊天中断。

有没有更好的方法来添加新行到我的聊天，而不是结束与底部额外的空白?

注:我想到的另一个可能的解决方案是尝试以某种方式使用regex抓取最后一行并删除它，但我想我会问这里是否有更简单的方法来做到这一点，或者如果我太挑剔，希望我的文本区域能够漂亮而干净地附加文本(没有额外的换行符)。

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

so(这里是伪代码，但希望你能明白)

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

试试这个:

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

scenario: detect if #chat has messages append break line + message if #chat has not append only message

相关文章：