角度文本区域计数器换行符 SMS答案

【问题标题】：Angular Text Area Counter Line Breaks SMS角度文本区域计数器换行符 SMS
【发布时间】：2015-06-16 18:25:32
【问题描述】：

我正在尝试为sms 制作一个模仿电话的字符计数器。我可以计算字符、空格和换行符，但是我的计数器不同。使用换行符时，message.length 的计数减 1，但 maxlength 的计数超过 1。我认为缩进时会添加更多空格，但不确定如何将message.length 设置为与maxlength 相同。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
  <textarea ng-model="message" ng-trim="false" maxlength="160"></textarea>
  <span>{{160 - message.length}} left</span>
</body>

此外，此答案实际上对此不起作用（它将空格和换行符计为 1）： angularjs text area character counter

【问题讨论】：

答案不起作用的原因是因为 ng-trim 设置为 false。设置为true，不计算空格
哦，我很抱歉不清楚 - 我确实需要它来计算空格和换行符，但 ng-trim 将它们都计为 1；但是 SMS 将换行符计为 2。我正在寻找一种方法来准确地将换行符计为 2 以匹配最大长度。
Chrome counts characters wrong in textarea with maxlength attribute 的可能副本

标签： sms html angularjs

【解决方案1】：

因此，您唯一需要算作两个字符的是实际换行符（用户手动输入的换行符，而不是由文本长度超过 textarea 宽度允许的“虚拟”换行符）？

那么我建议这样做：

<span>{{160 - message.length - (message.length ? message.split("\n").length-1 : 0)}} left</span>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
  <textarea ng-model="message" ng-trim="false" maxlength="160"></textarea>
  <span>{{160 - message.length - (message.length ? message.split("\n").length-1 : 0)}} left</span>
</body>

message.split("\n").length 计算在换行符处拆分消息后获得的部分数。一条没有换行符的消息给你一个“部分”，一条有一个换行符的消息给你两个部分，等等——因此-1。拆分一个空字符串仍然会得到一个结果，因此首先检查消息是否有长度。

根据定义，浏览器必须将 textarea 值中的换行符返回为\n - 这些已被message.length 计为一个字符，因此我们只需再次减去\n 字符的数量，从而计算每个字符\n 作为结果中的两个字符。（我想它们在 SMS 文本消息长度中被计为两个，因为这实际上可能使用 \r\n 换行。）

【讨论】：

这太完美了！谢谢！

【解决方案2】：

在计算长度之前，可以用长度为 2 的字符串替换换行符，如下：

<span>{{160 - message.replace('\n', '--').length}} left</span>

查看这个小提琴（我已将小提琴的最大长度减少到 10 以便于测试）：

http://jsfiddle.net/9DbYY/307/

【讨论】：

这适用于第一个换行符，它计为 2，但后续的计为 1。