Javascript 通过单击添加新文本时，需要调整textarea的大小

我正在努力让一个文本区域调整它的高度，如果需要的话，在一些文本被点击添加到它之后。 因此，我将eventlistener用于我的textarea，以确定何时添加了一定数量的字符，并且需要进一步增加一行，以便垂直调整textarea的大小。它可以很好地处理手动添加的字符，但是出于格式化的原因，我想使用所谓的“bb标记”。比如说，我使用一个按钮添加红色格式标签：[color=red][/color]。 问题是，当我通过单击添加[color=red][/color]时，我的文本区域不会自动添加新行。 我制作了以下代码片段来测试我的代码

//自动调整文本区域的大小
const textarea=document.getElementById（'shoutbox-comment'）；
textarea.addEventListener（'input'，function（）{
这一行=2；
this.rows=countRows（this.scrollHeight）；
});
函数countRows（滚动高度）{
返回Math.floor（scrollHeight/18）；//18px=行高
}
//bbtags格式
功能标签（h、a、i）{
var g=document.getElementById（h）；
g、 焦点（）；
如果（g.setSelectionRange）{
var c=g.scrollTop；
var e=g.selectionStart；
var f=g.selectionEnd；
g、 value=g.value.substring（0，g.selectionStart）+a+g.value.substring（g.selectionStart，g.selectionEnd）+i+g.value.substring（g.selectionEnd，g.value.length）；
g、 选择开始=e；
g、 selectionEnd=f+a.length+i.length；
g、 scrollTop=c；
}否则{
if（document.selection&&document.selection.createRange）{
g、 焦点（）；
var b=document.selection.createRange（）；
如果（b.text！=“”）{
b、 text=a+b.text+i；
}否则{
b、 文本=a+“替换”+i；
}
g、 焦点（）；
}
}
}
//单击时插入bbtag
bb_red.onclick=函数（）{
javascript:bbtags（“shoutbox comment”、“[color=red]”、“[/color]”）；
}

#shoutbox注释{
宽度：270px；
线高：18px；
}

---

将函数bb\u red.onclick的代码替换为：

bb_red.onclick = function() {
    javascript:bbtags("shoutbox-comment", "[color=red]", "[/color]");
  textarea.rows = countRows(textarea.scrollHeight);
}