如何使我的textarea最大长度与ng-model确定的当前长度相对应？

Question

I have a TextArea , and underneath is a character count. The html is the following:

<textarea class="form-control rows="7" ng-model="feedback" maxlength="1000"></textarea>
<span>{{1000 - feedback.length}}</span>

The controllers are all wired up properly and so forth, but the issue is with how the two counters are counting. The max length attribute (as well as the ng-maxlength, for that matter), will include carriage returns. However, feedback is just a string in my scope, which excludes any carriage returns. As a result, every time I press "Enter", I get a little closer to the max length without impacting the character count.

The result is that if the user presses enter 8 times, then he is blocked from typing once the character count says there are still 8 characters remaining. How can I solve this using Angular?

Answer 1

You could recalculate the length every time the user presses a key using .keyup() (if you are using jQuery too) and replace all carriage returns using Regex like this string.replace(/[\\n\\r]/g, '') . This would get rid of all the carriage returns and return the true length of the text.

Answer 2

将ng-trim =“ false”添加到元素：

<textarea class="form-control rows="7" ng-trim="false" ng-model="feedback" maxlength="1000"></textarea>

Answer 3

My solution was partially implementation of two of the proposed answers. Firstly I needed to set ng-trim="false" as a part of the TextArea field. In this way, carriage returns were counted regularly, however, each carriage return counted as two characters. This was, for our effort, deemed acceptable, but may not be the case for someone else using this solution.

That is, is your text area has length 10, you could only press the carriage return 5 times before it prevents you from typing any more.

In the controller, I had to create logic which emulated the very same character count as the one I just described above.

$scope.adjustForReturn = function() {
    // 10 being the max length
    $scope.remainingCharacters = 10 - $scope.feedback.replace("\r\n", "").length;
    $scope.remainingCharacters = $scope.remainingCharacters - ($scope.feedback.split(/[\r\n]/).length - 1);

    // Since carriage return is 2 chars, if you have one left and press enter, it will display -1. This is a fix to that edge case
    if ($scope.remainingCharacters < 0) {
        $scope.remainingCharacters = 0;
    }
}

The above function was bound to the text area using ng-keyup="adjustForReturn()" so that whenever the user releases a key pressed, the remaining character count is re-evaluated (which works well from a UX perspective).

I have not tested this extensively cross browser yet, this was all done in Chrome, I was made to understand that for one of my colleagues, the carriage return did in fact count as one character, so again, I want to re-emphasize this solution is probably not ideal and there is a little more work to be done around it, but it seems like it is 95% of the way there.