如何使我的textarea maxlength與ng-model確定的當前長度相對應？

我有一個TextArea，下面是一個字符數。在HTML如下：如何使我的textarea maxlength與ng-model確定的當前長度相對應？

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

控制器被所有的有線正確等等，但問題是如何將兩個計數器計數。最大長度屬性（以及ng-maxlength，就此而言）將包含回車符。但是，feedback只是我的作用域中的一個字符串，它排除了任何回車。因此，每次按「Enter」鍵，我都會接近最大長度，而不會影響字符數。

結果是，如果用戶按下輸入8次，那麼一旦字符數表示剩餘8個字符，他就被禁止輸入。我如何使用Angular解決這個問題？

來源

2014-11-20 mike

我的解決辦法是部分實現的兩個提議的答案。首先，我需要將ng-trim="false"設置爲TextArea字段的一部分。這樣，定期計算回車率，但每次回車計算爲兩個字符。對於我們的努力來說，這被認爲是可以接受的，但對於使用此解決方案的其他人而言可能並非如此。

也就是說，您的文本區域長度爲10，您只能按回車鍵5次，才能防止再次輸入。

在控制器中，我不得不創建邏輯模擬與上面剛剛描述的字符數相同的字符數。

$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; 
    } 
}

上述功能被綁定到使用ng-keyup="adjustForReturn()"文本區域，以便每當用戶釋放按下的鍵，其餘的字符計數重新評估（其從UX透視效果很好）。

我還沒有測試過這個廣泛的跨瀏覽器，這一切都是在Chrome中完成的，我明白，對於我的一個同事來說，回車實際上算作一個字符，所以我想再次重新強調這個解決方案可能並不理想，並且圍繞它需要做更多的工作，但似乎有95％的解決方案。

來源

2014-11-24 00:17:19 mike

您可以重新計算每次用戶使用.keyup()（如果您也使用jQuery）按下一個鍵的長度，並使用正則表達式替換所有回車符，如string.replace(/[\n\r]/g, '')。這將消除所有回車並返回文本的真實長度。

來源

2014-11-20 20:41:41 Anubhav

有趣的是，必須結合使用這個答案和@ Walter的答案。兩種算法和一些算術的組合導致了一個可接受的解決方案，雖然即使如此，每個回車計數也只有2個字符（有道理，\ r \ n，儘管我做不到這一點）。 – mike 2014-11-21 04:28:10

如果您可以在這裏分享您的解決方案，那將是非常棒的。 – Anubhav 2014-11-21 07:54:04

已發佈，我使用的是兩個解決方案的混合體，發佈在這裏 – mike 2014-11-24 00:17:50

附加NG-裝飾=「假」的元素：

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

來源

2014-11-20 20:57:39

仍然不是很正確，在我的情況下，每個回車現在可以是1個字符（在DOM中）或2個（在JS中） – mike 2014-11-20 21:34:57

如何使我的textarea maxlength與ng-model確定的當前長度相對應？

回答

相關問題