js如何实时获取textarea里内容的行数

我的textarea的内容是通过input框id赋值过来的，并且赋值到textarea后自动增加\n换行。
如何实时获取textarea ids里的内容的行数呢？并显示在span标签里？
同时如何限制输入的行数？


```html

<input type"text" id="id" name="id" class="layui-input">
<textarea id="ids" name="ids"></textarea>
<span class="help-inline">您已输入<span style="color:#F00;" id="areaRows">0</span>个ID
<br />
(一行一个，最多可输入500个)<br /><span style="color:#F00; display:none;" id="errorText">最多可输入500个</span></span>

  $('#id').on('keydown', function (event) {
      if (event.keyCode == 13) {
          var id= $("#id").val();
          if (!id) {
              layer.msg('id不能为空！', function (index) {
                  layer.close(index)
                  });
                  return false;
                  }else if (id.length != 10 && id.length != 23) {
                      layer.msg('请输入[10位] 或者 [23位]字符的SN！', {icon: 1,time: 1000},function (index) {
                          layer.close(index)
                          });
                          return false;
                          }else{
                              var id= document.getElementById("id").value;
                              if (id) {
                                  var ids= document.getElementById("ids").value;
                                  var snArr = ids.split("\n");
                                  if (snArr.indexOf(id) == -1) {
                                      document.getElementById("ids").value += id+ "\n";
                                      }else {
                                          layer.msg("该id已存在，请不要重复添加!");
                                          }
                                } else {
                                    layer.msg("请输入id！");
                                    }
                            }
        }
    });

```

行数的话：

const lineCount = $("#id").val().split("\n").length;

显示在 span 里：

$("#areaRows").html(lineCount);

通过input框赋值过来的，只增不减吗？如果是，赋值一次行数+1，限制行数可以在赋值前检查行数是否超限，没超限才赋值，超限给出相应提示