这可能是一个非常基本的问题,因为我在这里所希望的似乎并不疯狂——我已经仔细寻找了一些现有的答案或更好的解决方案,所以我提前道歉,如果这是任何形式的重复!
我的问题是附加()数据到现有的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+' ');
$('#chat').scrollTop($('#chat')[0].scrollHeight); // focuses on bottom of textarea
我想要的输出:新行追加到文本区域,每条新消息作为一个新行。文本区域底部没有多余的行。
我所经历的:确实,新行附加到文本区域,每个作为新行(由于使用
HTML回车符)。然而,由于这个新的行字符在我的append()
字符串的末尾,在我的最后一条消息下面添加了一个空白行(见:https://biturl.io/VCjaj5截图)。将回车符添加到字符串的前面将固定底部的额外换行符,但是在发送第一条消息时将在最顶部创建一个换行符。
我理解另一种方法是通过抓取$('#chat')
的.val()
,将我的新数据添加为新行,例如:
var oldChat = $('#chat').val();
var newChat = oldChat + ' ' + 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 = ' ' + string
textarea.value = string
试试这个:
var strt = $('#chat').text().replace(/[srnt]/g,"").length == 0 ? "" : "
";
$('#chat').append(strt + chatMsg.name+': '+chatMsg.message);
scenario: detect if #chat
has messages append break line + message
if #chat
has not append only message