角度文本区域计数器行中断SMS
[英]Angular Text Area Counter Line Breaks SMS
问题描述
I'm trying to make a character counter that mimics a phone for sms . 
我正在尝试制作一个模拟手机短信的角色计数器。 I've got it counting characters, spaces, and line breaks, however my counters differ. 我有计算字符，空格和换行符，但我的计数器不同。 With line breaks, it decrements by 1 in the count for message.length, but does for more than one in the maxlength. 对于换行符，它在message.length的计数中递减1，但在maxlength中递减多次。 I'm thinking that more spaces are added in when indented, but not sure how to get the message.length set the same as maxlength . 我想在缩进时添加更多空格，但不确定如何获取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>
Also this answer doesn't actually work for this (it counts spaces and line breaks as 1): angularjs text area character counter 此答案实际上并不适用于此（它将空格和换行符计为1）： angularjs文本区域字符计数器
2 个解决方案
解决方案1
5 已采纳 2015-06-16 18:58:38
So the only thing you need to count as two characters are actual line breaks (line breaks entered manually by the user, not “virtual” line breaks caused by the text being longer than the textarea width allows)? 因此，您需要计算为两个字符的唯一事项是实际换行符（用户手动输入的换行符，而不是文本长度超过textarea宽度所允许的“虚拟”换行符）？
Then I'd suggest this: 那我建议这个：
<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 counts the number of parts you get after you split the message at line breaks. message.split("\\n").length计算在换行符拆分消息后得到的部件数。 A message without a line break gets you one “part”, a message with one line break gets you two parts, etc. – hence the -1 . 没有换行符的消息会给你一个“部分”，带有一个换行符的消息会让你获得两个部分，等等 - 因此-1 。 And splitting an empty string still gets you one result, therefor the check if the message has a length at all first. 拆分空字符串仍会得到一个结果，因此检查消息是否首先具有长度。
By definition, a browser has to return line breaks in a textarea's value as \\n – those are counted as one character by message.length already, so we just subtract the number of \\n characters again, thereby counting each \\n as two characters in the result. 根据定义，浏览器必须返回textarea值中的换行符\\n - 那些已被message.length统计为一个字符，所以我们再次减去\\n字符的数量，从而将每个\\n为两个字符在结果中。 (I suppose they are counted as two in an SMS text message length, because that might actually be using \\r\\n for line breaks.) （我想它们在SMS文本消息长度中被计为两个，因为实际上可能正在使用\\r\\n进行换行。）
解决方案2
0 2015-06-16 18:55:30
You can replace newline characters by a string of length 2 before evaluating the length, as follows: 在评估长度之前，您可以使用长度为2的字符串替换换行符，如下所示：
<span>{{160 - message.replace('\n', '--').length}} left</span>
see this fiddle (I have reduced the max length in the fiddle to 10 for easier testing): 看到这个小提琴（我已经将小提琴中的最大长度减少到10以便于测试）：
http://jsfiddle.net/9DbYY/307/ http://jsfiddle.net/9DbYY/307/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.