Javascript 在使用jQuery追加文本后,如何删除文本区域底部的空行分隔符?
这可能是一个非常基本的问题,因为我在这里的愿望似乎并没有那么疯狂——我已经仔细寻找了一些现有的答案或更好的解决方案,所以如果这是任何形式的重复,我提前道歉 我的问题是将数据附加到现有的textarea元素: jSFiddle: 我的HTML:Javascript 在使用jQuery追加文本后,如何删除文本区域底部的空行分隔符?,javascript,jquery,html,Javascript,Jquery,Html,这可能是一个非常基本的问题,因为我在这里的愿望似乎并没有那么疯狂——我已经仔细寻找了一些现有的答案或更好的解决方案,所以如果这是任何形式的重复,我提前道歉 我的问题是将数据附加到现有的textarea元素: jSFiddle: 我的HTML: <textarea id='chat'></textarea> //note: 'chatMsg' data is provided back from the server $('#chat').append(chatMsg.
<textarea id='chat'></textarea>
//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
My desired output:文本区域追加新行,每条新消息作为新行。区域底部没有额外的线
我所经历的:事实上,新的行附加到文本区域,每一行都作为新行(由于使用了
;
HTML回车)。但是,由于此新行字符位于我的append()
字符串的末尾,因此在我的最后一条消息下面添加了一个空行(请参阅:获取屏幕截图)。将回车符添加到字符串的前面将修复底部多余的换行符,但在发送第一条消息时将在最顶部创建换行符
我知道另一种方法是抓取$('#chat')
的.val()
,将我的新数据添加为新行,例如:
var oldChat = $('#chat').val();
var newChat = oldChat + ' ' + chatMsg.name + ': ' + chatMsg.message;
$('#chat').val(newChat);
但是,当我尝试这种方法,希望将新消息作为新行添加到oldChat
下面时,HTMl回车字符不会显示,而是显示为文本(请参见:)。我还尝试使用\n
字符,但这实际上杀死了我的javascript提示符(未显示),我的聊天中断
有没有更好的方法可以在聊天中添加新词,而不会在底部留下额外的空白
注意:我想到的另一个可能的解决方案是尝试并以某种方式使用正则表达式抓取最后一行并将其删除,但我想在这里问一下,是否有更简单的方法来实现这一点,或者我是否过于挑剔,希望我的文本区域能够清晰地添加文本(没有额外的换行符) 可以在换行之前而不是之后换行,为了确保第一行上方没有新行,请检查textarea是否为空
所以(这里是pesudo代码,希望你能理解)
可以在换行之前而不是之后换行,为了确保第一行上方没有新行,请检查textarea是否为空
所以(这里是pesudo代码,希望你能理解)
试试这个:
var strt = $('#chat').text().replace(/[\s\r\n\t]/g,"").length == 0 ? "" : "
";
$('#chat').append(strt + chatMsg.name+': '+chatMsg.message);
场景:检测#聊天
是否附加了消息断线+消息
如果#聊天
没有仅附加消息。尝试以下操作:
var strt = $('#chat').text().replace(/[\s\r\n\t]/g,"").length == 0 ? "" : "
";
$('#chat').append(strt + chatMsg.name+': '+chatMsg.message);
场景:检测#chat
是否有消息附加换行+消息
如果#chat
没有只附加消息。构建JSFIDLE或堆栈代码段,检索值时只需使用.trim()
。这将删除开头和结尾的所有空白,包括换行符。@Barmer我确实尝试过使用.trim(),但回车符在我概述的第二种方式中似乎工作不正常……我不太清楚原因,但感谢您将.trim()置于我的关注范围之内!构建一个JSFIDLE或堆栈代码段,在检索值时只需使用.trim()
。这将删除开头和结尾的所有空白,包括换行符。@Barmer我确实尝试过使用.trim(),但回车符在我概述的第二种方式中似乎工作不正常……我不太清楚原因,但感谢您将.trim()置于我的关注范围之内!我很感谢你的回复,代码是多么的干净!我尝试了这种方法,但不幸的是,回车出现在文本中:我感谢您的回复,代码是多么干净!我尝试了这种方法,但不幸的是,回车出现在文本中: