Question

我试图制作一个模仿sms手机的角色计数器。我计算过字符，空格和换行符，但是我的计数器有所不同。对于换行符，它在message.length的计数中递减1，但在maxlength中递减多次。我认为缩进时会添加更多空格，但不确定如何将message.length设置为与maxlength相同。

＆＃13;

<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>

＆＃13;

此答案实际上并不适用于此（它将空格和换行符计为1）： angularjs text area character counter

Answer 1

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

然后我建议：

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

＆＃13;

<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>

＆＃13;

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

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

Answer 2

在评估长度之前，您可以用长度为2的字符串替换换行符，如下所示：

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

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

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

角度文本区域计数器行中断SMS

2 个答案: